1、vue的概念和特点：
vue是一套用于构建用户界面的渐进式JavaScript框架
易用：在有HTML，CSS，JavaScript的基础上，快速上手。
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能：20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化
2、vue的基本使用：
提供填充数据的标签
引入vue.js文件
使用vue.js语法做功能
vue提供的数据填充到标签
实例参数分析：
el:元素的挂载位置(值可以是css选择器或者DOM元素)
data:模型数据
{{}}差值表达式：将数据填充到html；做一些简单的计算操作
vue代码运行的原理：编译过程的概念(vue语法>原生语法)
3、vue基础指令：
指令的本质就是自定义属性
v-cloak：防止页面加载时出现闪烁问题
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
原理：先通过css将其隐藏，然后在通过内存中进行值替换，替换好之后显示效果
v-text:指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
如果数据中有HTML标签会将html标签一并输出
此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
v-html:用法和v-text 相似 但是他可以将HTML片段填充到标签中
可能有安全问题, 一般只在可信任内容上使用
v-html，永不用在用户提交的内容上它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
<div v-html="html"></div>
v-pre:显示原始信息跳过编译过程
跳过这个元素和它的子元素的编译过程。
一些静态的内容不需要编译加这个指令可以加快渲染
<span v-pre>{{ this will not be compiled }}</span>
v-once:执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
v-module:本质
绑定数据value 触发输入事件input
<!--解决经常刷新出现花括号 -->
<div v-cloak>{{msg}}</div>
<input type="text" v-bind:value="msg" v-on:input="handle" >
<!-- 简写版 -->
<input type="text" :value="msg" @input="handle">
<input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
<!-- 简写版 -->
<input type="text" :value="msg" @input='msg=$event.target.value'>
<!-- v-model -->
<input type="text" value="" v-model='msg'>
v-on
用来绑定事件的
形式如：v-on:click 缩写为 @click;
<button v-on:click='handle1'>点击1</button>
//带参数
<button v-on:click='handle2(123, 456, $event)'>点击2</button>
v-bind
v-bind 指令被用来响应地更新 HTML 属性
v-bind:href 可以缩写为 :href;
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
绑定对象操作css:
<!-- v-bind:class="{css类名:对象名}" -->
<!-- 案例 -->
<div v-bind:class="{active:IsShow,error:Iserror}">通过true来控制类名</div>
data: {
IsShow:true,
Iserror:true
}
绑定数组操作css:
<!-- v-bind:class="[别名A，别名B]" -->
<ul class="box" :class="[classA, classB]">
<li>学习Vue</li>
<li>学习Node</li>
<li>学习React</li>
</ul>
data:{
别名：'css属性'
classA:‘textColor‘,
classB:‘textSize‘
}
混合使用操作css:
<div v-bind:class="[a,b,{test:Istest}]">12314</div>
data: {
a:'active',
b:'error',
Istest:true
}
绑定对象和绑定数组 的区别
绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
绑定数组的时候数组里面存的是data 中的数据
绑定数组操作style:
<div v-bind:style="{height:h,width:w,border:b}">124</div>
<div v-bind:style="objstyle">66</div>
<div v-bind:style="[objstyle,overrideStyles]">88</div>
data: {
h:'150px',
w:'190px',
b:'1px solid blue',
objstyle:{
height:'150px',width:'190px',border:'1px solid blue'
},
overrideStyles: {
border: '5px solid orange',
backgroundColor: 'blue'
}
}
v-if
使用场景
1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
2- 进行两个视图之间的切换
<div v-if="score>=90">优秀</div>
<div v-else-if="score<90&&score>=80">良好</div>
<div v-else-if="score<80&&score>60">一般</div>
<div v-else>比较差</div>
<div v-show="flag">显示</div>
<button v-on:click='handle'>点击</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
分支结构
v-show的原理：控制元素样式是否显示 display:none
*/
var vm = new Vue({
el: '#app',
data: {
score: 80,
flag:true
},
methods: {
handle: function(){
this.flag=!this.flag
}
}
});
</script>
v-show 和 v-if的区别
-
v-show本质就是标签display设置为none，控制隐藏
- v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
-
v-if是动态的向DOM树内添加或者删除DOM元素
- v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
v-for
- 用于循环的数组里面的值可以是对象，也可以是普通元素
<!-- 循环结构-遍历对象
v 代表 对象的value
k 代表对象的 键
i 代表索引
--->
<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
<!-- 循环结构-遍历数组
item 是我们自己定义的一个名字 代表数组里面的每一项
items对应的是 data中的数组-->
<li v-for="item in items">
{{ item.message }}
</li>
key 的作用
- key来给每个节点做一个唯一标识
- key的作用主要是为了高效的更新虚拟DOM
<li v-for="item in items" :key="item.id">...</li>
4、双向数据绑定:当数据发生变化的时候，视图也就发生变化;当视图发生变化的时候，数据也会跟着同步变化
5、MVVM设计思想
MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
m model
- 数据层 Vue 中 数据层 都放在 data 里面
v view 视图
- Vue 中 view 即 我们的HTML页面
vm （view-model） 控制器 将数据和视图层建立联系
- m 即 Vue 的实例 就是 vm
6、事件修饰符
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
因此，用 v-on:click.prevent.self 会阻止所有的点击，
而 v-on:click.self.prevent 只会阻止对元素自身的点击。
7、按键修饰符
监听键盘事件
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<!-- -当点击enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!--当点击enter或者space时 时调用 `vm.alertMe()` -->
<input type="text" v-on:keyup.enter.space="alertMe" >
常用的按键修饰符
.enter => enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右
自定义按键修饰符别名
在Vue中可以通过config.keyCodes自定义按键修饰符别名
Vue.config.keyCodes.f5 = 116;
预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法
<input type="text" v-on:keydown.f5="prompt()">
