vue是一个渐进式的javascript，可以将vue作为你应用的一部分嵌入其中，带来更丰富的交互体验，也可以使用更多的vue核心库去进行开发。
vue是一个轻量级的mvvm框架，通过数据驱动和组件化进行前端开发，通过简单的api就能实现响应式的数据绑定和组合的视图组件。
1.首先要导入vue 的js
| <script src="vue-2.4.0.js"></script> <body> <div id="app"> <h2>Hello {{name}}</h2> </div> </body> <script> let app= new Vue({ el: '#app', date:{ name: 'Vue' } }) </script> |
1.创建一个vue对象，浏览器内存中就有一个vue
2.创建vue的时候，传入一个参数，这个参数是一个对象options
3.参数中有el属性，该属性决定了这个vue对象挂载到哪一个元素上。
4.参数中有date属性，该属性定义存储大部分的数据，这些数据可以自己直接定义，也可以从网络中获取。
2.vue列表循环显示
| <body> <div id="app"> <ul> <li v-for="item in books">{{item}}</li> </ul> </div> </body> <script> let app = new Vue({ el: '#app', data: { books: ['vue', 'Vue从入门到精通', 'java从入门到放弃', '数据库从入门到删库'] } }) </script> |
3.计算器案例
| <body> <div id="app"> <h3>当前计数：{{count}}</h3> <button @click="addCount">加</button> <button @click="delCount">减</button> </div> </body> <script> let app = new Vue({ el: '#app', data: { count: 0 }, methods: { addCount() { this.count++ }, delCount() { this.count-- } } }) </script> |
@click 这是vue中监听点击事件的方式，而@click需要指定发生点击时所执行的方法，该方法是在methods中定义的。
什么是mvvm
mvvm：能够帮助我们减少不必要的dom操作，提高渲染效率，数据绑定单向，双向，通过框架提供的一些指令，我们只需要关注数据业务逻辑，不需要关注dom是如何渲染的，在vue中，一个最核心的思想就是不让用户去操作dom元素。
model: 对应数据层的域模型，它主要做数据的管理，通过ajax/fetxh/axios等api完成客户端和服务端的model同步，在层间关系里，它主要用于抽象出viewmodel中的model。
view：view是作为视图模板，用于定义结构，布局。它自己不处理数据，只是将viewmodel中的数据展现出来。
viewmodel：viewmodel起着链接view和model的作用，同时用于处理view中的逻辑。viewmodel从model中取数据，渲染到view中。
基础语法
v-once
有些情况下，我们可能不希望页面随意的改变，这个时候我们可以使用v-once指令。该指令后面不需要跟任何的表达式，该指令表示元素和组件之间只会渲染一次，不会随着数据的改变而改变。
v-html
输出html格式。
v-text ：作用和插值运算符比较类似，都是用于将数据显示在页面中，通常情况下，v-text接受一个string类型，v-text会替换标签内的内容。
v-pre：是用于跳过这个元素和它子元素的编译过程，标签内怎么写，页面就怎么展示。
过滤器：语法：{{数据 | 过滤器名称}}，filters属性与data和methods平级，用于定义过滤器。过滤器本质上是一个方法，接收一个参数。在页面中，使用插值运算符
| <body> <div id="app"> <h2>{{count | filterEven}}</h2> <h2>{{count2 | filterEven}}</h2> </div> </body> <script> let app = new Vue({ el: '#app', data: { count: 10, count2: 11 }, filters: { filterEven(num) { if (num % 2 === 0) { return num } else { return '非法数字' } } } }) </script> |
属性绑定
动态来绑定，比如A标签的href，img标签的src等，我们可以使用v-bind指令。
v-bind指令用于绑定一个值或多个值
| <body> <div id="app"> <a v-bind:href="baiduLink">百度</a> <!-- v-bind有简写方式 --> <a :href="baiduLink">百度</a> </div> </body> <script> let app = new Vue({ el: '#app', data: { baiduLink: 'http://www.baidu.com' } }) </script> v-bind绑定class <body> <div id="app"> |
<!-- 方式1：直接通过{}绑定一个类 -->
<h2 :class="{'active':isActive}">Hello Vue</h2>
<!-- 方式2：这种方式可以通过判断，传入多个值 -->
<h2 :class="{'active':isActive, 'size': big}">Hello Vue</h2>
<!-- 方式3：和普通类同时存在，并不冲突 -->
<h2 class="h2-border" :class="{'active':isActive, 'size': big}">Hello Vue</h2>
<!-- 方式4：如果过于复杂，可以放到一个data中 -->
<h2 class="h2-border" :class="classes">Hello Vue</h2>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
isActive: true,
big: true,
classes: ['active', 'size']
}
})
</script>
v-bind绑定style
<body>
<div id="app">
<!-- 方式1：直接绑定对象 -->
<h2 :style="{color: 'red', fontSize: '15px'}">Hello Vue</h2>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
}
})
</script>
v-model
表单在实际开发中非常常见，一般是用于数据的提交，需要使用大量的表单，vue中使用v-model来实现表单元素和数据的双向绑定。
<body>
<div id="app">
<input type="text" name="name" v-model="name">
<h2>{{name}}</h2>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
name: '张三'
}
})
</script>
当我们输入表单中的数据时，data中也会随之改变，data被改变后，插值运算符中的显示内容也会随之改变。
v-model绑定select
当我们选中option的时候，会将它对应的value赋值给mySelect。当我们mySelect的值改变时，option会自动选中对应的value的那一项
<body>
<div id="app">
<select v-model="mySelect">
<option value="java">Java从入门到精通</option>
<option value="python">python从入门到精通</option>
<option value="php">php从入门到精通</option>
<option value="mysql">mysql从删库到跑路</option>
</select>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
mySelect: 'php'
}
})
</script>
监听器
如果我们需要监听某个值的变化，当这个值变化是，进行一些操作，可以使用监听器。监听器的属性名称是watch和data平级，监听器中的数据是方法，接收两个参数，分别为改变后的值和改变前的值。
<body>
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<h2>{{fullName}}</h2>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '狗子',
fullName: ''
},
watch: {
firstName: function(newVal, oldVal) {
// 在vue中，操作data、method必须使用this
this.fullName = this.firstName + this.lastName
},
lastName(newVal, oldVal) {
this.fullName = this.firstName + this.lastName
}
}
})
</script>
计算属性
我们知道在模板中可以通过插值语法实现一些data中的数据。但是某些情况，我们可能需要对数据进行一些转换后再实现，或者需要将多个数据结合起来进行实现。
| <body>
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<h2>{{fullName}}</h2>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '狗子'
},
computed: {
fullName() {
// 写法是个方法，但是使用的时候是作为属性使用的，和data一致。
return this.firstName + this.lastName
}
}
})
</script>
计算属性是一个属性，而不是方法，虽然写法是方法，但是我们使用的时候是直接视为一个属性去操作的，使用方式和data一致。 计算属性中使用到的data中的数据只要发生了变化，计算属性就会重新计算，如果两次获取计算属性的时候，里面使用到属性没有发生变化，计算属性会直接使用之前缓存的值。 计算属性的getter金额setter 每一个计算属性都包含get方法和set方法，在上面的例子中，我们只是使用get去读取计算属性的值，在某些情况下，我们可能会需要人工改变计算属性的数据，这个时候我们就需要使用setter方法。 计算属性如果需要定义set和get方法这时候计算属性就使用对象进行编写。
<body>
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<input type="text" v-model="fullName">
</div> </body>
<script>
let app = new Vue({
el: '#app',
data: { firstName: '张', lastName: '狗子' },
computed: {
fullName: { get() { console.log('调用了get方法') return this.firstName+' '+this.lastName },
set(val) { console.log('调用了set方法') const names = val.split(' ') this.firstName = names[0] this.lastName = names[1] }
}
}
})
</script>
注意点 计算属性，在computed中，可以定义一些属性，这些属性叫做计算属性，他本质上就是一个方法，但是，我们使用的时候是当做属性来使用，计算属性使用的过程中，一定不要加（），他就是一个属性。和data里的属性用法一样。 只要属性中所用到的data中的属性发生了变化，就会立即去重新计算属性的值。、 计算属性的结果会被缓存起来，方便下次调用，如果计算属性中用到的data都没有变化，就不会重新求值。 在计算属性中，无论如何都需要return一个值，用来代表这个属性的值。 计算属性和监听器的区别： computed：用法视为一个属性，并且结果会被缓存。 methods：标识方法，表示一个具体的操作，主要用来写业务逻辑 watch：是一个对象，key是需要监听的表达式，value是对应的回调函数，主要用来监听某些数据的变化，从而执行某些具体的业务逻辑，可以看做是计算属性和methods的结合体。
事件监听 v-on 简写 @
<body>
<div id="app">
<h2>{{count}}</h2>
<input type="text" v-on:focus="alertMsg">
<button v-on:click="addCount">点我</button>
<!-- v-on的简写方式 -->
<button @click="addCount">点我</button>
</div>
</body>
<script>
let app = new Vue({
el: '#app', data: { count: 0 },
methods: { addCount() { this.count++ },
alertMsg() { alert('获取了焦点') } } })
</script>
v-on参数 当通过methods定义方法，以供@click调用时，需要注意参数问题 1.如果该方法不需要参数，那么方法后的括号不可以添加，因为存在某些框架，如果加了括号之后，可能在页面渲染完毕后立即加载一遍该方法。 2.如果需要传入某个参数，那么这个时候需要括号，并且需要在括号中传入参数。
条件判断 v-if，v-else-if，v-else。
v-if可以根据表达式中的值渲染或者销毁元素和组件。
<body>
<div id="app">
<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 75">良好</div>
<div v-else-if="score >= 60">及格</div>
<div v-else>不及格</div>
<button @click="delScore">减分</button>
</div>
</body>
<script>
let app = new Vue({
el: '#app', data: { score: 100 },
methods: { delScore() { this.score -= 10 } } })
</script>
v-show 用法与v-if类似，也是用于条件判断的。
<body>
<div id="app">
<div v-show="score >= 90">优秀</div>
<div v-show="score >= 75 && score < 90">良好</div>
<div v-show="score >= 60 && score < 75">及格</div>
<div v-show="score < 60">不及格</div>
<button @click="delScore">减分</button>
</div>
</body>
<script>
let app = new Vue({
el: '#app', data: { score: 100 },
methods: { delScore() { this.score -= 10 } } })
</script>
二者的区别： v-if是完全不创建dom元素，而v-show则是创建dom元素，仅仅是使用display：none隐藏了该元素。 当需要频繁的显示，隐藏一些内容时，使用v-show。当我们仅有一次切换，某些v-if场景根本不会显示出来的时候，用v-if。
v-for遍历数组 格式：item in items ，后面的items代表着呢需要遍历的数组，item则表示每一项名称。
<body>
<div id="app">
<ul>
<li v-for="item in dataList">{{item}}</li>
</ul>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: { dataList: [ 'Java从入门到精通', 'php从入门到精通', 'mysql从删库到跑路', 'Vue从单身到脱单' ]
} })
</script>
如果我们需要在遍历的过程中，获取该元素所在数值中的索引值，应该怎么操作？
<li v-for="(item, index) in dataList">{{index + ':' + item}}</li>
v-for遍历对象
<ul>
<li v-for="(value, key, index) in myInfo">{{index}}:{{key}}:{{value}}</li>
</ul>
myInfo: { id: 3, name: '张三', age: 23, hobby: '唱跳rap篮球' }
v-for遍历数组对象
<li v-for="item in userList">{{item.id}}--{{item.name}}--{{item.age}}</li> userList: [ {id: 3, name: '张三', age: 23}, {id: 4, name: '李四', age: 24}, {id: 5, name: '王五', age: 25}, {id: 6, name: '赵六', age: 26} ]