1.vue 中的实例
- <div id="exp">
- <div @click="handleClick">{{content}}</div>
- </div>
- </body>
- <script>
- var vm = new Vue({
- // el 限制一个 vue 实例的管理范围.
- el:"#exp",
- data:{
- content:"hello world"
- },
- methods:{
- handleClick:function () {
- alert(this.content)
- }
- }
- });
- </script>
- // vm 为一个实例, 当执行 vm.$destory() 就会销毁这个实例. 这样通过修改数据 vm.$data.message = "123",
页面不会有相应的变化
2.Vue 生命周期钩子
生命周期函数就是 vue 实例在某一个时间点自动执行的函数.
注意: 生命周期的函数并不会定义在 methods 中.
代码
- <div id="app"></div>
- <script>
- var vm = new Vue({
- el:"#app",
- template:`<div>{{test}}</div>`,
- data:{
- test:"hello world"
- },
- // vue 实例进行基本初始化之后会被执行
- beforeCreate:function () {
- console.log("beforeCreate");
- },
- // 初始化一些外部注入, 和双向绑定, 当此类操作完成会调用 created
- created:function () {
- console.log("created");
- },
- // 在 template 页面挂载之前执行函数
- beforeMount:function () {
- // 此时 this.$el 还没有被渲染
- console.log("beforeMount");
- },
- // 页面渲染完执行周期函数 mounted
- mounted:function () {
- // 此时 this.$el 已经被渲染了,
- console.log("mounted");
- },
- // 当调用 vm.$destroy(), 即将被销毁时候会执行
- beforeDestroy:function () {
- console.log("beforeDestory");
- },
- // 当前实例被销毁会被调用
- destroyed:function () {
- console.log("destroyed");
- },
- // 数据发生改变, vm.test='123'还没有重新渲染数据会被执行
- beforeUpdate:function () {
- console.log("beforeUpdate");
- },
- // 重新渲染数据会被执行 vm.test='123'
- updated:function () {
- console.log("updated");
- }
- })
- </script>
3. 模板语法
1. 差值表达式
- <div id="exp">
- {{name}}
- </div>
或
- <div>{{"my name is"+name}}</div>
- <script>
- var vm = new Vue({
- // el 限制一个 vue 实例的管理范围.
- el:"#exp",
- data:{
- name:"James"
- }
- });
- </script>
- 2.v-text
- <div v-text="name"></div>
或
- <div v-text="'my name is' + name"></div>
- <script>
- var vm = new Vue({
- // el 限制一个 vue 实例的管理范围.
- el:"#exp",
- data:{
- name:"James"
- }
- });
- </script>
- 3.v-html
- <div v-HTML="name_html"></div>
- var vm = new Vue({
- // el 限制一个 vue 实例的管理范围.
- el:"#exp",
- data:{
- name_html:"<h1>James</h1>"
- }
- });
- 4.v-on
- 5.v-bind
4. 侦听器和计算属性
1. 计算属性
所谓计算属性, 是通过计算得来的, 下面 fullName 是通过定义 computed 内的函数得到的.
- var vm = new Vue({
- el:"#exp",
- data:{
- firstName:"Dell",
- lastName:"Lee"
- age:20
- },
- computed:{
- fullName:function () {
- console.log("计算一次")
- return this.firstName + " " + this.lastName
- }
- }
- });
计算属性是有缓存的, 上面的 fullName 是通过 firstName 和 lastName 拼接成的, 当 firstName 和 lastName 不发生改变, 比如只改变了 age, 是不会打印 "计算一次", 因为计算属性内部有缓存, 为了提高性能, 但是 firstName 或 lastName 发生改变, 会打印 "计算一次", 进行重新计算一次.
相比如 methods 方法, 在 age 发生变化时, 会再次重新调用 fullName, 所以计算属性更加高效:
- methods:{
- fullName:function () {
- return this.firstName + " " + this.lastName
- }
- },
2. 侦听器
通过 watch 监听 firstName 和 lastName 改变, 如果数据发生改变会执行 watch 监听的函数, 如果没有发生改变则不会执行. 侦听器和计算属性都有缓存的概念, 但是通过 watch 侦听器写出的代码更加复杂:
- watch:{
- firstName: function () {
- this.fullName = this.firstName + " " + this.lastName
- },
- lastName: function () {
- this.fullName = this.firstName + " " + this.lastName
- },
- },
所以最优推荐: 计算属性 > 侦听器 > methods
3. 计算属性的 setter 和 getter
computed 不仅可以写 get 方法, 还可以写 set 方法, 去设置值, 但是我们一般都是只写 get 方法, 注意的是 set 方法需要传入一个值.
- computed:{
- fullName:{
- // 当取 fullName 会执行此方法
- get:function () {
- return this.firstName + " " + this.lastName
- },
- // 当设置 fullName 会执行此方法
- set:function (value) {
- var arr = value.split(" ");
- this.firstName = arr[0];
- this.lastName = arr[1];
- console.log(value)
- }
- }
- }
5.vue 中的样式绑定
在我们写页面过程中, 会给 DOM 添加一些样式, 那么 Vue 中如何添加样式
方式 1:class 对象绑定
- <style>
- .activated {
- color:red;
- }
- </style>
- <div id="exp">
- <div @click="handleDivClick" :class="{activated:isActivated}">{{text}}</div>
- </div>
- <script>
- var vm = new Vue({
- // el 限制一个 vue 实例的管理范围.
- el:"#exp",
- data:{
- text:"hello world",
- isActivated:false
- },
- methods:{
- handleDivClick:function () {
- this.isActivated = ! this.isActivated
- }
- }
- });
方式 2: 数组方式
- <div id="exp2">
- <div @click="handleDivClick" :class="[activated,]">{{text}}</div>
- </div>
- var vm2 = new Vue({
- // el 限制一个 vue 实例的管理范围.
- el:"#exp2",
- data:{
- text:"hello world",
- activated:""
- },
- methods:{
- handleDivClick:function () {
- this.activated = this.activated === "activated" ? "":"activated"
- }
- }
- });
方式 3:style 改变样式 对象绑定
- <div id="exp3">
- <div @click="handleDivClick" :style="styleObj">{{text}}</div>
- </div>
- <script>
- var vm3 = new Vue({
- // el 限制一个 vue 实例的管理范围.
- el:"#exp3",
- data:{
- text:"hello world",
- styleObj:{
- color:"black"
- }
- },
- methods:{
- handleDivClick:function () {
- this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
- }
- }
- });
- </script>
方式 4:style 改变样式 数组绑定
<div @click="handleDivClick" :style="[styleObj,{fontSize:'40px'}]">{{text}}</div>
6.Vue 条件渲染
- 1.v-if
- <div v-if="show">{
- {
- message
- }
- }</div>
- 2.v-show
- <div v-show="show">{
- {
- message
- }
- }</div>
它们之间区别在于, v-show 其实已经在页面渲染出来了, 只不过加上了 display:none, 而 v-if 还没有在页面渲染出来.
- var vm = new Vue({
- // el 限制一个 vue 实例的管理范围.
- el:"#exp",
- data:{
- show:false,
- message:"hello world"
- }
- });
当在终端输入: vm.show = true, 它们都会显示. 当经常显示去除标签时, 显然 v-show 更加高效. 因为不会想 v-if 一样, 不断的创建和销毁. 反之 v-if 更合适.
- 3.v-if-else / v-else
- v-else
- <div id="exp">
- <div v-if="show">{{message}}</div>
- <div v-else>Bye world</div>
- </div>
- v-else-if
- <div id="exp">
- <div v-if="show ==='message'">{{message}}</div>
- <div v-else-if="show ==='count'">1</div>
- <div v-else>Bye world</div>
- </div>
v-if,v-else,v-else-if 绑定标签一定要连起来写, 才不能失效
4.key 值的使用
key 值的使用是必要的
- <div id="app">
- <div v-if="show">
- 用户名: <input type="text" key="username">
- </div>
- <div v-else>
- 邮箱名: <input type="text" key="email">
- </div>
- </div>
- <script>
- // 每个元素标签设置一个 key 值, 表示它是唯一标签, 如果 2 个 key 不一样则不会服用原来元素标签
- // 虚拟 dom 算法用的内容
- var App = new Vue({
- el:"#app",
- data:{
- show:false
- }
- })
- </script>
7.Vue 中的列表渲染 v-for
基础的使用
- <div id="exp">
- <div v-for="(item,index) of list">
- {{item}}------{{index}}
- </div>
- </div>
- var vm = new Vue({
- // el 限制一个 vue 实例的管理范围.
- el:"#exp",
- data:{
- list:[
- "hello,",
- "James",
- "nice",
- "to",
- "meet",
- "you"
- ]
- }
- });
为了提高循环的性能会给 v-for 标签加上唯一的 key 值, 那么上例就可以这么写:
<div v-for="(item,index) of list" :key="index">
但是往往项目中后端返回的数据都是如下类似类型的:
- list:[
- {id:001102,text:"hello"},
- {id:029303,text:"James"},
- ......
- ]
那么可以在 v-for 绑定唯一的 key 值
<div v-for="(item,index) of list" :key="item.id">
当我们操作数组时, 不能通过下标方式添加数组如: list[i]={id:03957569,text="bye"}, 只能通过 vue 中提供方式如下:
方式 1:
- push
- pop
- shift
- unshift
- splice
- sort
- reverse
方式 2:
改变数组的引用
template 占位符
模板占位符, 通过模板占位符可以帮助我们包裹一些元素, 但是在循环过程中, 并不会真正被渲染到页面上.
数组的循环
- <template v-for="(item,index) of list"
- :key="item.id">
- <div>
- {{item.text}}
- </div>
- <span>
- {{index}}
- </span>
- </template>
对象的循环
- <div id="app">
- <div v-for="(item,key,index) of userInfo">
- {{item}}---{{key}}---{{index}}
- </div>
- </div>
- <script>
- var App = new Vue({
- el:"#app",
- data:{
- userInfo:{
- name:"James",
- age:28,
- gender:"male",
- salary:"secret"
- }
- }
- });
- </script>
8. 补充: Vue 当中 set 方法
对象增加数据
- //App 为一个实例
- App.$set(App.userInfo,"address","beijing")
数组增加数据
vm.$set(vm.list,2,"wawawawaw")
小总结:
改变数组中数据方式
改变数组的引用
使用数组的变异方法
set 方法
改变对象中数据方式
改变对象的引用
set 方法
来源: http://www.bubuko.com/infodetail-3392840.html