Vue简介与基础
一、什么是Vue.js
Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
Vue.js 是前端的**主流框架之一**，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，**只关注视图层**，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
vue基本代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <h1>{{ msg }}</h1> <input type="button" :value="msg" @click="hello"> </div> <script> var vm = new Vue({ el:'#app', data:{ msg:'hello vue', }, methods:{ hello: function(){ alert('hello vue') } }, }) </script> </body> </html>
二、vue常用指令
1、v-bind(用于绑定属性的指令)
v-bind简写: :(':'符号)
<input type="button" value="按钮1" v-bind:title="mytitle + '123'"> <input type="button" value="按钮2" :title="mytitle + '123'">
2、v-on(事件绑定机制)
v-on简写: @
<input type="button" value="按钮" v-on:click="show"> <input type="button" value="按钮" @click="show">
3、v-cloak(防止闪烁)
<p v-cloak>++++++ {{ msg }} ----------</p> <h4 v-text="msg">==================</h4> <!-- 默认 v-text 是没有闪烁问题的 -->
4、v-text（ 解析文本）
<span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span>
5、v-html（解析html标签）
<div v-html="html"></div>
6、v-model（多用于表单元素实现双向数据绑定）
<h4>{{ msg }}</h4> <input type="text" style="width:100%;" v-model="msg"> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: 'aaaaaaaaaaaaa' }, methods: { } }); </script>
7、v-show（ 显示内容）
8、v-if（显示与隐藏）
例子：（7、8的例子）
<input type="button" value="toggle" @click="flag=!flag"> <h3 v-if="flag">这是用v-if控制的元素</h3> <h3 v-show="flag">这是用v-show控制的元素</h3> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: false }, }); </script>
9、v-else-if（必须和v-if连用）
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>
10、v-else（必须和v-if连用）
<div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div>
11、v-once（进入页面时 只渲染一次 不在进行渲染）
<div v-once> <h1>comment</h1> <p>{{msg}}</p>//加载后，数据不会再更改了 </div>
12、v-pre（把标签内部的元素原位输出，不解析）
<div v-pre>{{msg}}</div>//结果还是{{msg}}
13、v-for（循环）
<div id="app"> <!-- 循环数组--> <p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p> <!-- 循环对象数组--> <p v-for="(user, i) in list2">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p> <!-- 循环对象--> <p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p> <!-- 循环数字--> <p v-for="count in 10">这是第 {{ count }} 次循环</p> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { list: [1, 2, 3, 4, 5, 6] , list2: [ { id: 1, name: 'zs1' }, { id: 2, name: 'zs2' }, { id: 3, name: 'zs3' }, { id: 4, name: 'zs4' } ], user: { id: 1, name: '汤姆·杰克', gender: '男' } }, methods: {} }); </script>
三、vue样式
1、class三种绑定方法
(1)直接传递一个数组 <h1 :class="['thin', 'italic']">1111</h1> (2)使用三元表达式 <h1 :class="['thin', 'italic', flag?'active':'']">1111</h1> (3)在数组中使用对象来代替三元表达式 <h1 :class="['thin', 'italic', {'active':flag} ]">1111</h1>
例子：
<h1 :class="classObj">11111</h1> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: true, classObj: { red: true, thin: true, italic: false, active: false } }, methods: {} }); </script>
2、vue中使用style
<h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { styleObj1: { color: 'red', 'font-weight': 200 }, styleObj2: { 'font-style': 'italic' } }, methods: {} }); </script>
三、事件修饰符
.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 添加事件侦听器时使用事件捕获模式
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
使用例子
<!-- 使用.stop 阻止冒泡（阻止上级所有层的事件）仅son --> <div class="father" @click="father"> <div class="son" @click.stop="son"></div> </div>
四、v-for与v-if优先级
当它们处于同一节点，v-for 的优先级比 v-if 更高。
