特性:数据驱动视图与数据双向半绑定
1.数据驱动视图
数据的变化会驱动视图自动更新
数据驱动视图是单向的数据绑定
2.双向数据绑定
填写表单时开发者不需要手动操作DOM元素,来获取表单元素最新的值
MVVM
是vue实现数据驱动视图和双向数据绑定的核心原理
MVVM指的是Model、View和ViewModel
他将每个html页面拆分成三个部分
Model表示当前页面渲染时所以来的数据源
View表示当前页面所渲染的DOM结构
ViewModel表示vue的实例,它是MVVM的核心
新建一个html文件
<body>
<div id="app">{{username}}</div>
<!-- 导入Vue的库文件,在window全局就有了Vue这个构造函数 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
<script>
//创建Vue实例
const vm = new Vue({
//el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器
el: '#app',
//data对象就是要渲染到页面上的数据
data: {
username: 'Hello word'
}
})
</script>
</body>其对应关系如图
Vue指令预过滤器
指令
模板语法,用于辅助开发者渲染页面的基本结构
根据用途分为6大类
内容渲染指令
v-text
//用得不多
<div id="app">
<p v-text='username'>姓名</p>
<p v-text='gender'>性别</p>
<!-- 此时v-text会将性别覆盖 -->
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
username: 'Hello word',
gender: '男',
}
})
</script>{{}} 差值表达式
//解决v-text会覆盖默认文本的问题
注意:插值表达式只能用在元素的内容节点中,不能用在属性节点中
<p>姓名:{{ username }}</p>
<p>性别:{{ gender }}</p>v-html
//把包含HTML标签的字符串渲染为页面的HTML元素
<p v-html='info'></p>
<script>
data: {
info:'<h4 style="color: red;font-weight:bold;">欢迎大家学习Vue.js
</h4>'
}
</script>属性绑定指令
v-bind
<input type="text" v-bind:placeholder='tips'>
<img v-bind:src='pic' alt="">
<script>
data: {
tips:'请输入用户名',
pic:'https://w.wallhaven.cc/full/57/wallhaven-5758y8.jpg',
}
</script>在差值和属性绑定中编写JS语句
<div>1+2的结果是{{ 1+2 }}</div>
<div>{{ tips }}的反转结果是{{ tips.split("").reverse().join('') }}</div>
<div :title="'box' + index">这是一个div</div>
<script>
data: {
index:'2',
}
</script>事件绑定指令
v-on
<p>acg的值是:{{ acg }}</p>
<button v-on:click="add">+1</button>
<button v-on:click="sub">-1</button>
<script>
data: {
username: 'Hello word',
acg: '0',
},
methods: {
add: function () {
this.acg++;
},
//简写
sub() {
this.acg--;
}
},
//这些属性都是在本篇开头创建Vue实例里的这里为了方便没有写只用script标签概括了
//因为创建的Vue实例是一个对象将它打印即可看到有acg属性在内所以用this即可获取
//传参只需在绑定时加小括号 如<button @click="add(1)">+1</button>
//函数中add(n){this.acg+=n}此时调用函数时n为1
//若没有明确传参有默认参数e
//v-on可以简写为 @
</script>$event
//解决传参覆盖e
<body>
<div id="app">
<p>count的值是：{{ count }}</p>
<button @click='add(1)'>+N</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
<script>
const vm = new Vue({
el: '#app',
data: {
count: 0,
},
methods: {
add(n) {
this.count += n
console.log(e)
if (this.count % 2 === 0) {
e.target.style.backgroundColor = 'red'
} else {
e.target.style.backgroundColor = ''
}
}
},
})
</script>
</body>
<!-- 此时传参为1 console.log打印出的也是1,e.target便无法
获取到也就不能改变样式-->
<!-- 此时只需在传参时加入$event -->
<button @click='add(1,$event)'>+N</button>
<!-- 在函数有序的添加一个参数可以是e也可以其它但要注意要与上面绑定
顺序对应 -->
add(n,e){}.prevent阻止默认行为
.stop阻止事件冒泡
.capture以捕获模式触发当前的事件处理函数
.once绑定的事件只触发1次
.self只有在event.target是当前元素自身时触发事件处理函数
事件修饰符
<!-- 阻止默认行为 -->
<a href="http://www.baidu.com" @click='show'>跳转百度首页</a>
show(e) {
e.preventDefault();
console.log('点击了链接')
}
<!-- 使用prevent -->
<a href="http://www.baidu.com" @click.prevent='show'>跳转百度首页</a>
show() {
console.log('点击了链接')
}
<!-- 阻止冒泡行为 -->
<div style="background-color: skyblue;" @click='aaa'>
<button @click='bbb'>按钮</button>
</div>
aaa() {
console.log('aaaa')
},
bbb() {
console.log('bbbb')
},
<!-- 当点击按钮式会触发div的点击事件 用.stop解决代替e.stopPropagation(); -->
<button @click.stop='bbb'>按钮</button>事件修饰符
监听键盘事件判断相关事件
<!-- 按esc时清空输入框 按enter打印 -->
<input type="text" @keyup.esc='clearInput' @keyup.enter='commitAjax'>
methods: {
clearInput(e) {
e.target.value = '';
console.log('已点击esc')
},
commitAjax(e) {
console.log('已点击enter')
}
}