Vue学习记录第二天

又来做笔记啦，今天又自暴自弃了，还好及时清醒过来了，什么时候努力都不晚，主要是要一直坚持下去，只要坚持就一定会有收获，所有成功得人背后都是付出了巨大得努力的，没有人平白无故的成功。看似光鲜亮丽的背后，人家都不知道付出多少时间和汗水，所以我也要加油，对自己有信心，虽然现在不懂，没关系只要学习就一定会有收获，要对自己有信心。加油，我可以的。废话不多说啦，开始我今天的总结。

首先，第一节学的就是Vue的计算属性Computed啦，Computed的作用呢就是可以使复杂的逻辑和频繁的数据变化操作变得简单起来。比如，它适用于 搜索功能啦，以及复杂的逻辑运算啦。只有数据发生改变时，计算属性才会被调用，避免的资源的浪费啦，相比之下，每当触发重新渲染时，methods方法呢，调用方法将总会再次执行函数。

举例说明:

<!-- vue-app是根容器 -->

<div id="vue-app">

　　<h1>Computed 计算属性</h1>

　　<button v-on:click="a++">Add to A</button>

　　<button v-on:click="b++">Add to B</button>

　　<p>A —— {{a}}</p>

　　<p>B —— {{b}}</p>

　　<!-- 在标签内部调用方法的时候方法名字后面需要添加"（）" -->

　　<!-- <p>Age + A = {{addToA()}}</p> -->

　　<p>Age + A = {{addToA}}</p>

　　<!-- 如果调用计算属性computed里面的方法，不需要加（） -->

　　<!-- 一般dom数据变话大的，例如大量搜索和耗时的情况下会用计算属性，一般情况下还是用methods实现 -->

　　<p>Age + B = {{addToB}}</p>

</div>

<script>

　　//实例化

　　new Vue({

　　　　el:'#vue-app',

　　　　data:{

　　　　　　a:0,

　　　　　　b:0,

　　　　　　age:20

　　　　},

　　methods:{

　　　　// addToA:function(){

　　　　　　// console.log("Add To A");

　　　　　　// return this.a + this.age;

　　　　// },

　　　　// addToB:function(){

　　　　　　// console.log("Add To B");

　　　　　　// return this.b + this.age;

　　　　// }

 

　　},

　　computed:{

　　　　addToA:function(){

　　　　　　console.log("Add To A");

　　　　　　return this.a + this.age;

　　　　},

　　　　addToB:function(){

　　　　　　console.log("Add To B");

　　　　　　return this.b + this.age;

　　　　}

　　　}

　　})

</script>

 

第二 Vue动态绑定class样式：  v-bind:class="{changeColor:changeColor}"  这种方式我理解的是有参数时候会用大括号的形式。

　　　　　　　　　　　　　　v-bind:class="compareClass"   没有大括号的这种是直接调用某个属性名字

<!-- vue-app是根容器 -->

<div id="vue-app">

　　<h1>动态绑定 css class</h1>

　　<h2>示例1</h2>

　　<!-- 动态改变颜色，首先添加一个class,点击的时候改变changeColor的状态，取反。就能实现点击切换颜色 -->

　　<div v-on:click="changeColor = !changeColor" v-bind:class="{changeColor:changeColor}">

　　　　<span>韩艳红</span>

　　</div>

　　<h2>示例2</h2>

　　<button v-on:click="changeColor = !changeColor">改变颜色</button>

　　<button v-on:click="changeLength = !changeLength">改变长度</button>

　　<!-- 利用动态属性实现修改颜色功能 所有写在标签上的属性或者事件里面的名字都不用加{}大括号,如果有参数得话，就需要添加大括号了 -->

　　<div v-on:click="changeLength = !changeLength" v-bind:class="compareClass"> 利用动态属性实现修改颜色功能

　　<span>学习Vue</span>

</div>

//实例化

new Vue({

　　el:'#vue-app',

　　data:{

　　　　changeColor:false,

　　　　changeLength:false

　　},

 

　　computed:{

　　　　compareClass:function(){

　　　　// 返回一个对象，里面有当前的颜色和长度

　　　　return{

　　　　　　changeColor:this.changeColor,

　　　　　　changeLength:this.changeLength

　　　　}

　　}

}

})

第三Vue的v-if和v-for的运用：

 

v-show 和 v-if的功能是一样的。

<!-- 点击为真的话，这句话是存在的，如果为假就不存在了，说明是没有占位符的。 -->

<p v-if="erro">网络连接错误，404</p>

<p v-else-if="success">网络连接成功，200</p>

<!-- v-show和v-if的区别就是v-show是存在占位符的，它只是display：none;用样式控制了显示和隐藏。 -->

<p v-show="erro">网络连接错误，404</p>

<p v-show="success">网络连接成功，200</p>

script里面设置了：

data:{

erro:false,

success:false

},

 

v-for实例: v-for="(items index) in user"

<!-- 用v-for遍历循环数组字符串 -->

<ul>

<li v-for="character in characters">

{{character}}

</li>

</ul>

<!-- 用v-for遍历循环数组对象 -->

<ul>

<li v-for="user in user">

name:{{user.name}}

age:{{user.age}}

</li>

</ul>

<!-- 取用户的下标 在里面可以再添加一个参数index-->

<ul>

<li v-for="(user,index) in user">

{{index}} name:{{user.name}}

age:{{user.age}}

</li>

</ul>

<!-- 如果用div循环的话，会有资源浪费的问题。会生成很多个无用的div -->

<div v-for="(user,index) in user">

<h3>{{index}}.{{user.name}}</h3>

<p> age:{{user.age}}</p>

</div>

<!-- 优化div，把无用的div去掉 template就不会被渲染出来-->

<template v-for="(user,index) in user">

<h3>{{index}}.{{user.name}}</h3>

<p> age:{{user.age}}</p>

</template>

-------------------------------------------------------------

<!-- 循环这个数组 -->

<template v-for="(user,index) in user">

<!-- 再循环数组里面的单个对象 -->

<div v-for="(val,key) in user">

<p>

{{key}} —— {{val}}

</p>

</div>

</template>

scritp里面：

data:{

characters:["a","b","c"],

user:[

{name:"lili",age:20},

{name:'pipi',age:25},

{name:'tete',age:18}

]

},

新版的vue里面v-for如果不提供key值得话加载慢，而且会报红，如何解决？

遍历得时候都给他一个key值，这样就没问题了。

<!-- 如果用div循环的话，会有资源浪费的问题。会生成很多个无用的div -->

<div v-for="(user,index) in user" :key="index">

<h3>{{index}}.{{user.name}}</h3>

<p> age:{{user.age}}</p>

</div>

 

好啦，今天大致就学了这么多，还有一个综合性的小练习。虽然学了这么点，但是很多在写例子的时候还是想不起来怎么，还有逻辑能力也有待提高。慢慢来，加油。