Vue 是什么？
- vue 是一套用于构建用户界面的渐进式框架，vue 外围库只关注视图层，不仅易上手还便于与第三方库或既有我的项目的整合
指令：实质就是属性，Vue 中以 v - 结尾的属性就是指令-
v-clooak 避免页面加载时呈现闪动问题
v-clooak 的应用<style type="text/css"> /* 1、通过属性选择器 抉择到 带有属性 v -cloak 的标签让他暗藏 */ [v-cloak]{ /* 元素暗藏 */ display: none; } </style> <body> <div id="app"> <div v-cloak >{{msg}}</div> /* 让带有插值愈发的增加 v-cloak 在数据渲染实现之后，v-cloak 属性会被主动去除 v-cloak 一旦移除也就是没有这个属性了，属性选择器就抉择不到该标签也就是对应的标签会变为可见 */ </div> // 引入 vue 文件 <script src="js/vue.js"></script> <script> var vm = new Vue({ //el 指定元素 id 是 app 的元素 el: '#app', //data 外面存储的是数据 data: {msg: 'Hello Vue'} }); </script> </body> -
v-text
`1. v-text 指令用于将数据填充到标签中，作用于插值表达式相似，然而没有闪动问题 ` `2. 如果数据中有 HTML 标签会将 html 标签一并输入 ` `3. 留神：此处为单向绑定，数据对象上的值扭转，插值会发生变化；然而当插值发生变化并不会影响数据对象的值 ` v-text 的应用<div id="app"> **<!-- 留神：在指令中不要写插值语法，间接写对应的变量名称 --> <!-- 所以在 v -text 中赋 ** 值的时候不要写插值语法个别不加 {{}} 间接写数据名 --> <p v-text="msg"></p> <!--vue 中只有在标签的内容中采纳插值语法 --> <p>{{msg}}</p> </div> <script src="./js/vue.js"></script> <script> new Vue({ el: '#app', data: {msg: 'Hello Vue.js'} }); </script> -
v-html
`1. 用法和 v -text 类似 然而他能够将 HTML 片段填充到标签中 ` `2. 可能有平安问题，个别只在信赖的内容上应用 v -html，永远不必在用户提交的内容上 ` `3. 它与 v -text 区别在于 v -text 输入的是纯文本，浏览器不会对其再进行 html 解析，但 v -html 会将其当 html 标签解析后输入。`<div id="app"> <!-- 输入：html 标签在渲染的时候被解析 --> <p v-html="html"></p> <!-- 输入：<span> 通过双括号绑定 </span> --> <p>{{message}}</p> <!-- 输入：<span>html 标签在渲染的时候被源码输入 </span> --> <p v-text="text"></p> </div> <script src="./js/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { message: "<span> 通过双括号绑定 </span>", html: "<span>html 标签在渲染的时候被解析 </span>", text: "<span>html 标签在渲染的时候被源码输入 </span>", } }); </script> -
v-pre
1. 显示原始信息跳过编译过程
2. 跳过这个元素和它的子元素的编译过程。
3. 一些动态的内容不须要编译加这个指令能够放慢渲染<div id="app"> <span v-pre>{{this will not be compiled}}</span> <!-- 显示的是{{this will not be compiled}} --> <span v-pre>{{msg}}</span> <!-- 即便 data 外面定义了 msg 这里依然是显示的{{msg}} --> </div> <script src="./js/vue.js"></script> <script> new Vue({ el: '#app', data: {msg: 'Hello Vue.js'} }); </script> - v-once
执行一次性的插值【当数据扭转时，插值处的内容不会持续更新】
<div id="app">
<!-- 即便 data 外面定义了 msg 前期咱们批改了
依然显示的是第一次 data 外面存储的数据即 Hello Vue.js -->
<span v-once>{{msg}}</span>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {msg: 'Hello Vue.js'}
});
</script>- 双向数据绑定
1. 当数据发生变化的时候，视图也就发生变化2. 当视图产生扭转的时候，数据也会跟着同步变动
- v-model
v-model 是一个指令，限度在 <input>、<select>、<textarea>、components 中应用
<div id="app">
<div>{{msg}}</div>
<div>
<!--- 当输入框中内容扭转的时候, 页面上的 msg 会自动更新 -->
<input type="text" v-model='msg'>
</div>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {msg: 'Hello Vue.js'}
});
</script>- v-on
用来绑定事件的: 模式如：v-on:click 缩写为 @click
<div id="app">
<div>{{num}}</div>
<div>
<!--- 通过 v -on 或者其缩写模式 @来给元素绑定事件 -->
<button v-on:click='num++'> 点击 1 </button>
<button @click='num++'> 点击 2 </button>
</div>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {num:1}
});
</script>- **v-on 事件函数中传入参数 **
```html
<div id="app">
<div>{{num}}</div>
<div>
<!-- 如果事件间接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
<button v-on:click='handle1'> 点击 1 </button>
<!--
如果事件绑定函数调用，那么事件对象举荐作为最初一个参数显示传递，事件对象的名称为 $event
-->
<button @click='handle2(12,23,$event)'> 点击 2 </button>
</div>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {num:1},
methods:{handle1:function(e){
this.num++
<!-- 事件对象中有能够拿到相应的值 -->
<!-- 这个拿的是是按钮外面的值：点击 1 -->
console.log(e.target.innerHTML)
}
handle2:function(p,p1,e){console.log(p+p1)
<!-- 这个拿的是是按钮外面的值：点击 2 -->
console.log(e.target.innerHTML)
this.num++
}
}
});
</script>
```- 事件修饰符
1. 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是十分常见的需要。
2. Vue 不举荐咱们操作 DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符
3. 修饰符是由点结尾的指令后缀来示意的
<!-- 阻止单击事件持续流传 -->
<a @click.stop="doList"></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 只会阻止对元素本身的点击。`
- 按键修饰符
在做我的项目中有时会用到键盘事件，在监听键盘事件时，咱们常常须要查看具体的按键。Vue 容许为 v-on 在监听键盘事件时增加按键修饰符
<!-- 只有在 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" >
<!--
罕用的按键修饰符
1. .enter => enter 键
2. .tab => tab 键
3. .delete (捕捉“删除”和“退格”按键) => 删除键
4. .esc => 勾销键
5. .space => 空格键
6. .up => 上
7. .down => 下
8. .left => 左
9. .right => 右
-->
<script>
var vm = new Vue({
el:"#app",
methods: {submit:function(){},
alertMe:function(){},
}
})
</script>- 自定义按键修饰符别名
在 Vue 中能够通过 config.keyCodes 自定义按键修饰符别名
<div id="app">
<!-- 事后定义了 keycode 116（即 F5）的别名为 f5，因而在文字输入框中按下 F5，会触发 prompt 办法 -->
<input type="text" v-on:keydown.f5="prompt()">
</div>
<script>
Vue.config.keyCodes.f5 = 116;
let app = new Vue({
el: '#app',
methods: {prompt: function() {alert('我是 F5！');
}
}
});
</script>- v-bind
v-bind 指令被用来响应地更新 HTML 属性 '
v-bind:href 能够缩写为 :href;
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">- 绑定对象
咱们能够给 v -bind:class 一个对象，以动静地切换 class。
留神：v-bind:class 指令能够与一般的 class 个性共存
<style>
.textColor{
color:#f00;
background-color:#eef;
}
.textSize{
font-size:30px;
font-weight:bold;
}
</style>
<!--
v-bind 中反对绑定一个对象
如果绑定的是一个对象则键为对应的类名值为对应 data 中的数据
--->
<div id="app">
<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
<li> 学习 Vue</li>
<li> 学习 Node</li>
<li> 学习 React</li>
</ul>
</div>
<script>
var vm= new Vue({
el:'.box',
data:{
isColor:true,
isSize:true，}
})
</script>-
绑定 class
<style> .textColor{ color:#f00; background-color:#eef; } .textSize{ font-size:30px; font-weight:bold; } </style> <!-- v-bind 中反对绑定一个数组, 数组中 classA 和 classB 对应为 data 中的数据 ---> <div id="app"> <ul class="box" v-bind:class="[classA, classB]"> <li> 学习 Vue</li> <li> 学习 Node</li> <li> 学习 React</li> </ul> </div> <script> var vm= new Vue({ el:'.box', data:{ classA:‘textColor‘, classB:‘textSize‘} }) </script> - 绑定对象和绑定数组 的区别
1. 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
2. 绑定数组的时候数组外面存的是 data 中的数据
-
绑定 style
<div id="app"> <div v-bind:style="styleObject"> 绑定款式对象 </div> <!-- CSS 属性名能够用驼峰式 (camelCase) 或短横线分隔(kebab-case 记得用单引号括起来)--> <div v-bind:style="{fontSize: fontSize,background:'red'}"> 内联款式 </div> <!-- 组语法能够将多个款式对象利用到同一个元素 --> <div v-bind:style="[styleObj1, styleObj2]"></div> </div> <script> new Vue({ el: '#app', data: { styleObject: { color: 'green', fontSize: '30px', background:'red' }, fontSize: "30px", styleObj1: { color: 'red', width:'100px' }, styleObj2: {fontSize: '30px'} } </script> - 分支构造
- v-if 应用场景
1. 多个元素 通过条件判断展现或者暗藏某个元素。或者多个元素
2. 进行两个视图之间的切换
<div id="app">
<!-- 判断是否加载，如果为真，就加载，否则不加载 -->
<span v-if="flag">
如果 flag 为 true 则显示,false 不显示!
</span>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{flag:true}
})
</script>- v-show 和 v-if 的区别
1. v-show 实质就是标签 display 设置为 none/block，控显示暗藏
`v-show 只编译一次，前面其实就是管制 css，而 v -if 不停的销毁和创立，故 v -show 性能更好一点 `2. v-if 是动静的向 DOM 树内增加或者删除 DOM 元素
v-if 切换有一个部分编译 / 卸载的过程，切换过程中适合地销毁和重建外部的事件监听和子组件
- 循环构造
- v-for
用于循环的数组外面的值能够是对象，也能够是一般元素
<ul id="example-1">
<!-- 循环构造 - 遍历数组
item 是咱们本人定义的一个名字 代表数组外面的每一项
items 对应的是 data 中的数组 -->
<li :key="item.id" v-for="item in items">
{{item.message}}
</li>
<!-- 循环构造 - 遍历对象
v 代表 对象的 value
k 代表 对象的键
i 代表 索引 --->
<div v-for='(v,k,i) in obj'>{{v + '-' + k + '-' + i}}</div>
</ul>
<script>
new Vue({
el: '#example-1',
data: {
items: [
{
id:1,
message: 'Tom'
},
{
id:2,
message: 'Jerry'
}
]，obj: {
uname: 'lfang',
age: 13,
gender: 'female'
}
}
})
</script>- key 的作用
个别循环都会增加 key 目标是
1. key 来给每个节点做一个惟一标识
2. key 的作用次要是为了高效的更新虚构 DOM