Vue基础学习小结（一）
一、Vue的基本介绍与使用
1、基本介绍
- Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架
- 特点:易用、灵活、高效
- 版本：2.6
- 作者：尤雨溪
- 兼容：IE8及以下不兼容
2、使用步骤
- 引入vue.js
- 开发版本(development)：警告、提示、没有压缩
- 生产版本（production）：部署上线时候用的，删除了警告、提示、压缩了代码
- 创建挂载节点
- **注意：**千万不能是body或者html
- 实例化Vue对象
- el：挂载节点的选择器
- data：模版中用到的所有数据
- {{data里面的变量}}
- {{表达式}}
3、MVVM
- M model（data里面的数据）
- V view(视图，就是模板)
- VM (虚拟模型)
注意：data里面的数据一旦变化，模板里面会自动更新！
4、插值表达式
<div id='app'>
<div>{{msg}}</div>
<div>{{msg+'----'+123}}</div>
<div v-text='msg'></div>
<div v-html='msg1'></div>
<div v-pre>{{msg1}}</div>
</div>
<script>
// 1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
// 2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题
// 3、v-pre用于显示原始信息
var vue = new Vue({
el: '#app',
data: {
msg: 'hello Vue!',
msg1: '<h1>123</h1>'
}
})
二、Vue的相关指令
1、指令的定义：
- 指令就是自定义属性
- 通常用法：<标签 v-指令名=“变量/表达式” />
2、常用指令
1、v-html
-
渲染数据！ 体验感更好！
-
**可以转义HTML字符串内容！**将其当html标签解析后输出， 类似于原生的innerHTML
-
可能有安全问题, 一般只在可信任内容上使用
v-html，永不用在用户提交的内容上
2、v-text
- 渲染数据！ 体验感更好！
- **不可以转义HTML字符串内容！**如果数据中有HTML标签会将html标签一并输出，类似于原生的innerText
- **注意:**在指令中不要写插值语法 直接写对应的变量名称
- 在 v-text 中 赋值的时候不要在写 插值语法
<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>
3、v-bind
- 属性绑定！ 给HTML标签的原生属性，让这些原生属性也支持属性和表达式！
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
- 绑定对象
- 我们可以给v-bind:class 一个对象，以动态地切换class。
- 注意：v-bind:class指令可以与普通的class特性共存
4、v-once
- 作用：一次性绑定数据，数据渲染之后，将来数据变化了，页面也不更新！
<标签 v-once>{{变量}}</标签>
<标签 v-once v-html="变量"></标签>
5、v-on
- 作用：绑定事件
<标签 v-on:事件类型="事件函数"></标签>
<标签 v-on:事件类型="事件函数()"></标签>
简写：
<标签 @事件类型="事件函数"></标签>
- 事件写在methods中
new Vue({
el:"xx",
data:{xxx},
methods:{
事件函数(){
...
}
}
})
-
传参：参数一一对应
<标签 @事件类型="事件函数(实参)" />new Vue({ el:"", data:{}, methods:{ 事件函数(形参){ ... } } }) -
注意：
-
事件函数里面的this都是当前vue实例对象！
-
methods里面的所有的事件函数都是当前vue实例的方法！
-
当形参单个存在，实参没有传的时候，形参就是事件对象
<div id='app'> <div>{{num}}</div> <button v-on:click='num++'>点击1</button> <button @click='num++'>点击2</button> <button @click='handle'>点击3</button> <button @click='handle()'>点击4</button> <button @click='handle2(123,$event,456)'>点击5</button> <button @click='handle3'>点击6</button> </div> <script src="./js/vue.js"></script> <script> //注意点：属性之间不要忘记逗号； var vm = new Vue({ el: '#app', data: { num: 0, }, //methods 中主要定义一些函数 methods: { handle: function() { // 此时的this指向Vue的实例对象 console.log(this === vm); this.num++; }, //参数要一一对应 handle2: function(x, e, y) { console.log(x, e, y); this.num++; }, //当调用函数不传参数时，形参就是事件对象 handle3: function(e) { console.log(e.target); this.num++; } } }) </script> -
6、v-model
- 作用： 实现数据的双向绑定
<div id="app">
<input type="text" v-model="msg" />
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"" // 数据实现双向绑定
}
})
</script>
7、v-pre
- 作用：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
8、v-cloak
- 作用：解决插值表达式刷新浏览器过程中编译慢，显示花括号的问题。
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
9、v-if
-
作用：根据条件渲染不同的模板内容！
-
使用语法：
第一种：
<标签 v-if="变量/表达式"></标签>
第二种：
<标签 v-if="变量/表达式"></标签>
<标签 v-else></标签>
第三种：
<标签 v-if="变量/表达式"></标签>
<标签 v-else-if="变量/表达式"></标签>
<标签 v-else></标签>
**注意：**语法之间不能插入其他语句，不然会报错
10、v-show
- 作用：根据条件渲染不同的模板内容！
- 使用语法：
<标签 v-show="变量/表达式"></标签>
注意：
v-if控制节点内容存不存在！ 从实现显不显示v-show节点都存在，通过css控制节点显不显示，相当于家里display：none
需要反复切换展示的内容，肯定使用v-show。一开始就觉得要渲染某种情况就是用v-if
11、v-for
-
作用：循环列表数据！
-
使用语法：
第一种:
<标签 v-for="值 in 数组/对象"></标签>
第二种：
<标签 v-for="(值,键) in 数组/对象" :key="键"></标签> // 这种方法！
第三种：
<标签 v-for="(值,键,下标) in 对象"></标签>
注意：
- 不要去看标识符名! 而要记住对应位置是什么东西！
- 双层嵌套循环，需要注意：内层的标识符名不要和外层冲突就好了！
- key键：防止就地复用！ vue默认是“就地复用策略”，之更改变化的部分！ 为了防止这种情况，我们需要使用就地复用！
案例：九九乘法表
<div id="app">
<div v-for="i in 9">
<span v-for="j in i">{{j}}*{{i}}={{i*j}} </span>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
i: '',
j: ''
},
methods: {}
})
</script>
12、v-if和v-for混合使用
-
v-for的优先级高于v-if
-
所以不推荐一起使用，如果真的放在一起使用，那么就是为了筛选，但是一旦数据量庞大就消耗性能
3、事件修饰符
- 含义：帮助我们实现一些方便操作（比如：阻止默认事件、阻止冒泡、捕获触发、等等！）
- 写法：
<标签 @事件类型.修饰符="事件函数"></标签>
<标签 @事件类型.修饰符1.修饰符2="事件函数"></标签>
- 事件修饰符：
-
-
.stop:阻止冒泡.prevent：阻止默认事件.capture：阻止捕获触发事件.self：只能自身触发.once：只触发一次.passive：滚动事件的默认行为 (即滚动行为) 将会立即触发
-
4、按键修饰符
- 按键修饰符是给按键相关事件的！
- 基本上都是用在：input、textarea
<标签 @事件类型.修饰符="事件函数"></标签>
- 按键修饰符:
-
.enter -
.tab -
.delete(捕获“删除”和“退格”键) -
.esc -
.space -
.up -
.down -
.left -
.right -
目前版本26个字母按键都已经绑定
-
自定义按键修饰符:
Vue.config.keyCodes.按键修饰符名 = 按键的keycode码！一般放在实例化之前去配置！
三、Vue样式
1、绑定class
- 对象形式
<标签 :class="{ class名1:变量1，class名2:变量2 }" />
- 数组
<标签 :class="[变量1，变量2,'class名1','class名2']" />
- 属性绑定
<标签 :class="条件 ？ 'class名1':'class名2' " />
2、绑定样式
- 对象
<标签 :style="{ css属性名名1:变量1，css属性名2:变量2 }" />
- 数组
<标签 :style="[变量1，变量2]" />
变量1:{ css属性名:css属性值 }
变量2:{ css属性名:css属性值 }
- 属性绑定（常用）
<标签 :style="'background-color:'+bgc+';font-size:'+num+'px;'" />
<标签 :style="`font-size:${a};border-color:${b}`" />
1728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
