CSS边距重叠
当两个垂直相邻的元素(通常为块级元素)的外边距相遇时,并非简单地相加,而是取两者中的最大值作为实际的外边距。这一现象主要发生在同方向的相邻外边距上,尤其是上下相邻的块级元素之间
初学vue时,并不推荐刚开始就直接学习使用脚手架搭建vue项目,而是先学习基础的语法,然后再去学习工程化后搭建项目。
引入vue有两种方式:
vue
源码<!-- 这里使用最新版本的vue2.7.16, 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
或者我们在 unpkg 和 cdnjs 上获取 (cdnjs 的版本更新可能略滞后)。打开它,然后复制所有代码存入到一个.js后缀的文件中。
<script src="./js/vue.2.7.16.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue初识</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
message: 'hello world'
}
}
})
</script>
</body>
</html>
看,一个 vue
页面就跑起来了,是不是很简单!
这段代码是一个简单的HTML
页面,
const app = new Vue()
创建了一个 Vue
实例,el
属性指定了页面中的元素 id
为 app
的 div
元素作为 Vue
实例的根元素data()
方法定义了一个数据对象,属性绑定了 message
变量,{{ message }}
插值表达式将变量的值插入到 div
元素中,这样我们只需要修改 message
变量的值,页面中的内容就会自动更新。<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
定义一个message
变量,在页面中通过{{message}}
显示
html
属性,不管是标签本身自有的属性,还是自定义的属性,都可以通过v-bind
指令绑定到html
元素上。v-bind
指令可以缩写为:
<a v-bind:href="url">v-bind:绑定指令</a>
<a :href="url">v-bind:绑定指令</a>
<span :title="title"></span>
var app = new Vue({
el: '#app',
data: {
url: 'https://zhangwurui.cn',
title: '页面加载于 ' + new Date().toLocaleString()
}
})
<a v-for="(item, i) in list" :key="i">
{{item}}
</a>
var app = new Vue({
el: '#app',
data() {
return {
list: ['HTML', 'CSS', 'JS', 'Vue']
}
}
})
事件方法需要写在Vue实例的methods中,然后通过v-on:
绑定事件,v-on:
可以缩写为@
<a v-for="(item, i) in list" :key="i" v-on:click="handleClick">
{{item}}
</a>
<a v-for="(item, i) in list" :key="i" @click="handleClick">
{{item}}
</a>
var app = new Vue({
el: '#app',
data() {
return {
list: ['HTML', 'CSS', 'JS', 'Vue']
}
},
methods: {
handleClick() {
alert('点击了')
}
}
})
<a v-if="show">显示哟</a>
<a v-else>不显示哟</a>
<a v-show="show">显示哟</a>
var app = new Vue({
el: '#app',
data() {
return {
show: true
}
}
})
通过 v-html
可以渲染 html标签, v-text
只能渲染文本,节点并不会被解析
<div v-html="message"></div>
<div v-text="message"></div>
var app = new Vue({
el: '#app',
data() {
return {
message: '<span style="color:red">我是红色</span>'
}
}
})
通过 v-model
可以实现数据双向绑定
<input type="text" v-model="message">
<span>{{ message }}</span>
<select name="" id="" v-model="selected">
<option v-for="item in selectdList" :key="item.value" :value="item.value">
{{ item.label }}
</option>
</select>
<span>{{ selected }}</span>
var app = new Vue({
el: '#app',
data() {
return {
message: '',
selected: '',
selectdList: [
{
label: '请选择', value: 'init'
},
{
label: '张三', value: 'zhangsan'
},
{
label: '李四', value: 'lisi'
}
]
}
}
})
.lazy
:失去焦点时才触发事件.number
:将值转为数字类型.trim
:去除首尾空格.stop
:阻止冒泡.prevent
:阻止默认事件.capture
:事件捕获.self
:事件源为当前元素时才触发事件.once
:事件只触发一次.passive
:事件处理函数在事件捕获阶段执行.native
:监听组件根元素的原生事件<input type="text" v-model.trim="message">
<input type="text" v-model.number="message">
<button @click.prevent="handleClick">点击</button>
<button @click.stop="handleClick">点击</button>
<button @click.self="handleClick">点击</button>