前言 |
1、Vue用于构建用户界面的渐进式框架
2、Vue使用的基本步骤
(1)需要提供标签用于填充数据
(2)引入vue.js库文件
(3)可以使用Vue的语法做功能
(4)把Vue提供的数据填充到标签里面
3、Vue模板语法
将数据填充到HTML标签中
4、v-vloak指令用法
解决插值表达式存在的闪动的问题
[v-cloak]{
/* 元素隐藏 */
display: none;
}
原理:先通过样式隐藏内容,然后在内存总进行值的替换,替换好之后再显示最终结果
5、v-text指令
- v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题
- 如果数据中有HTML标签会将html标签一并输出
- 注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值
<div id="app">
<!--
注意:在指令中不要写插值语法 直接写对应的变量名称
在 v-text 中 赋值的时候不要在写 插值语法
一般属性中不加 {{}} 直接写 对应 的数据名
-->
<p v-text="msg"></p>
<p>
<!-- Vue 中只有在标签的 内容中 才用插值语法 -->
{{msg}}
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
6、v-html
- 用法和v-text 相似 但是他可以将HTML片段填充到标签中
- 可能有安全问题, 一般只在可信任内容上使用 v-html,永不用在用户提交的内容上
- 它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。
<div id="app">
<p v-html="html"></p> <!-- 输出:html标签在渲染的时候被解析 -->
<p>{{message}}</p> <!-- 输出:<span>通过双括号绑定</span> -->
<p v-text="text"></p> <!-- 输出:<span>html标签在渲染的时候被源码输出</span> -->
</div>
<script>
let app = new Vue({
el: "#app",
data: {
message: "<span>通过双括号绑定</span>",
html: "<span>html标签在渲染的时候被解析</span>",
text: "<span>html标签在渲染的时候被源码输出</span>",
}
});
</script>
7、v-pre
- 显示原始信息跳过编译过程
- 跳过这个元素和它的子元素的编译过程。
- 一些静态的内容不需要编译加这个指令可以加快渲染
<span v-pre>{{ this will not be compiled }}</span>
<!-- 显示的是{{ this will not be compiled }} -->
<span v-pre>{{msg}}</span>
<!-- 即使data里面定义了msg这里仍然是显示的{{msg}} -->
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
v-once
执行一次性的插值【当数据改变时,插值处的内容不会继续更新】
<!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js -->
<span v-once>{{ msg}}</span>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
8、双向数据绑定
什么是双向数据绑定
- 当数据发生变化的时候,视图也就发生变化
- 当视图发生变化的时候,数据也会跟着同步变化
<input type='text' v-model='uname'/>
9、MvvM设计思想
- MVC 是后端的分层开发概念; MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel
- m model
- 数据层 Vue 中 数据层 都放在 data 里面
- v view 视图
- Vue 中 view 即 我们的HTML页面
- vm (view-model) 控制器 将数据和视图层建立联系
- vm 即 Vue 的实例 就是 vm
10、事件绑定
vue如何处理事件
- 用来绑定事件的
- 形式如:v-on:click 缩写为 @click;
- v-on指令用法
<input type='button' v-on:click='num++'/>
- v-on简写形式
<input type='button'@click='num++'>
事件行数的调用方式
- 直接绑定函数名称
<button v-on:click='say'>Hellow</button>
- 调用函数
<button v-on:click='say()'>Say hi</button>
事件函数参数传递
- 普通参数和事件对象
<button v-on:click='say("hi",$event)'>Say hi</button>
11、事件绑定-参数传递
- 如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数
- 如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且事件对象的名称必须是¥event
12、事件修饰符
.- stop阻止冒泡
<a V-on:click.stop="handle">跳转</a>
- .prevent阻止默认行为
<a v-on:click.prevent="handel">跳转</a>
13、按键修饰符
- .enter回车键
<input v-on:keyup.enter='submit'>
- .delete删除键
<input v-on:keyup.delete='handle'>
14、自定义按键修饰符
- 全局config.keyCodes对象
vue.config.keyCodes。f1=112
15、属性绑定
- v-bind指令用法
<a v-bind:href='url'>跳转</a>
- 缩写形式
<a:href='url'>跳转</a>
16、样式绑定
1.class样式处理
- 对象语法
<div v-bind:class="{active:isActive}"></div>
- 数组语法
<div v-bind:class="[activeClass,errorClass]"></div>
样式绑定相关语法细节
1.对象绑定和数组绑定可以结合使用
2.class绑定的值可以简化操作
2.style样式处理
- 对象语法
<div v-bind:style="{color:activeColor,fontSize:fontSize}"></div>
- 数组语法
<div v-bind:style="[baseStyles.overridingStyles]"></div>
17、分支循环结果
分支结构
- v-if
- v-else
- v-else-if
- v-show
v-if与v-show的区别
- v-if控制元素是否渲染到页面
- v-show控制元素是否显示(已经渲染到页面)
- v-for遍历数组
<li v-for='item in list'{{item}}</li>
<li v-for='(item,index) in list'>{{item}}+'---'{{index}}</li>
- key的作用:帮助Vue区分不同的元素,从而提高性能
<li :key='item.id' v-for='(item,index) inlist'>{{item}}+'---'{{index}}</li>
- v-for遍历对象
<div v-for='(value,key,index) in object'></div>
- v-if和v-for结合使用
<div v-if='value'==12 v-for='value,key,index'in object'></div>