Vue是目前最好的国产前端渐进式框架，它与原生js和jQuery的最大区别就是Vue是直接操作数据来达到对页面的渲染，而原生js和jQuery都是操作Dom元素来渲染页面。Vue可以让开发人员“换一种思路”去开发前端页面。
注意：在学习Vue之前，必须学好html。css。js的基础知识
基本使用：
- 插值表达式
使用步骤：
1）、需要提供标签用于填充数据
注意： 在标签中我们使用插值语法的形式 即 {{}} 进行填充数据
2）、引入vue.js库文件
注意：一定要先引入Vue文件 在使用Vue语法 因为存在作用域的问题
3）、使用vue的语法做功能
new Vue() 创建一个Vue的实例
在构造函数中以对象的形式做一些配置
4）、利用Vue将数据渲染到页面上
数据写在data 里面
实例代码：
<div class="header">
<div>{{msg}}</div>
</div>
<script>
var vue=new Vue({
el:'.header',
data:{
msg:'hello vue'
}
});
</script>
效果：
2. 指令
指令就是一个自定义属性。Vue中指令都是以 v- 开头
3. v-cloak
v-cloak是解决插值表达式的“闪动”问题。它可以让数据在内存中计算完毕再渲染到页面。
用法：直接添加在插值表达式所在的标签上即可
<div class="header">
<div v-cloak>{{msg}}</div>
</div>
<script>
var vue=new Vue({
el:'.header',
data:{
msg:'hello vue'
}
});
</script>
- v-text 和 v-html
<div class="header">
<div v-text='msg'></div>
<div v-text='msg1'></div>
<div v-html='msg1'></div>
</div>
<script>
var vue=new Vue({
el:'.header',
data:{
msg:'hello vue',
msg1:'<h2>hello vue</h2>'
}
});
</script>
效果：
v-text 和 v-html 的区别
v-text输出的是纯文本，浏览器不会对其再进行html解析
html会将其当html标签解析后输出
- v-pre
显示原始信息跳过编译过程
一些静态的内容不需要编译加这个指令可以加快渲染
<div class="header">
<div v-pre>{{msg}}</div>
</div>
<script>
var vue=new Vue({
el:'.header',
data:{
msg:'hello vue',
msg1:'<h2>hello vue</h2>'
}
});
</script>
- 数据响应式
数据响应式是指当数据改变的时候页面内容跟随者改变，不会再通过事件监听再去刷新页面数据，可以达到页面数据的实时更新。 - v-once
执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
当开发过程中确定不会改变的数据使用此指令，可以提升页面的响应速度
<div class="header">
<div v-once>{{msg}}</div>
</div>
<script>
var vue=new Vue({
el:'.header',
data:{
msg:'hello vue',
msg1:'<h2>hello vue</h2>'
}
});
</script>
- 双向数据绑定与v-model
什么是双向数据绑定
当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化
双向绑定的使用场景
v-model是一个指令，限制在 input、select、textarea、components（组件） 中使用
<div class="header">
<div>{{msg}}</div>
<input type="text" v-model='msg'>
</div>
<script>
var vue=new Vue({
el:'.header',
data:{
msg:'hello vue',
msg1:'<h2>hello vue</h2>'
}
});
</script>
9. MVVM
M、V、VM 分别代表什么？
m model
数据层 Vue 中 数据层 都放在 data 里面
v view 视图
Vue 中 view 即 我们的HTML页面
vm （view-model） 控制器 将数据和视图层建立联系
vm 即 Vue 的实例 就是 vm
事件绑定：
- v-on
通过v-on 绑定事件。。v-on 可以简写 @
<div class="header">
<div v-on:click='num++'>{{num}}</div>
<input type="text" v-model='msg'>
</div>
<script>
var vue=new Vue({
el:'.header',
data:{
msg:'hello vue',
msg1:'<h2>hello vue</h2>',
num:0
}
});
</script>
事件绑定还可以添加函数：
直接绑定函数名称调用
< button v-on:click=‘handle1’>点击1< /button>
调用函数的形式
< button v-on:click=‘handle1()’>点击1< /button>
<div class="header">
<div v-on:click='handle'>{{num}}</div>
<div v-on:click='handle()'>{{num}}</div>
<input type="text" v-model='msg'>
</div>
<script>
var vue = new Vue({
el: '.header',
data: {
msg: 'hello vue',
msg1: '<h2>hello vue</h2>',
num: 0
},
methods: {
handle: function () {
this.num++;
},
}
});
</script>
- 阻止冒泡和 阻止默认行为
.stop 阻止冒泡
.prevent 取消默认事件
<div class="header">
<!-- <div v-on:click='handle'>{{num}}</div>
<div v-on:click='handle()'>{{num}}</div>
<input type="text" v-model='msg'> -->
<a href="http://www.baidu.com" v-on:click.prevent>baidu</a>
</div>
<script>
var vue = new Vue({
el: '.header',
data: {
msg: 'hello vue',
msg1: '<h2>hello vue</h2>',
num: 0
},
methods: {
handle: function () {
this.num++;
},
}
});
</script>
- 键盘事件
常见按键修饰符有哪些
.enter => enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右
这些指令规定了按了哪些键盘上的键才会触发的事件