vue入门教程图解学习：从零开始Vue基础教程
vue入门教程图解学习：从零开始Vue基础教程3.在同一个目录下用编辑软件（随便什么都行，记事本都可以）新建一个文件，输入以下代码：2.将vue.js拷贝到任意一个目录（工作目录）需要注意的是，Vue并非UI框架，它的定位与Bootstrap、Frozen UI这一类专注于页面呈现的框架不是一回事，或者说，UI框架关注点在HTML，而Vue这一类框架关注点是JavaScript。Vue可以跟很多UI框架搭配使用，比如说Bootstrap（vueBootstrap），和一些专门与Vue配合的例如饿了吗团队开发的element-ui等等。002-实现第一个VueJS应用.html1.下载Vue: https://unpkg.com/vue/dist/vue.js
2013年，在Google工作的尤雨溪，开发出了一款轻量Javascript框架，最初命名为Seed，同年12月，更名为Vue，一经推出发展迅速，如今已成为最时髦和炙手可热前端框架，在Github上获得了超过十万的Star，国内许多知名公司都使用Vue作为前端开发工具，例如饿了么、美团等，很多公司的招聘要求都会把会使用vue作为加分项。
Vue的作者 - 尤雨溪
001-Vue的定位是什么？
Vue是一个Javascript框架，类似的框架有React，Angular等等，所谓框架就是一个比较大型的库，使用它能让基于网页的前端应用程序开发起来更加方便。相对于完全采用原生JavaScript代码来编写前端代码而言，使用框架的代码量更少，开发效率也更高。
需要注意的是，Vue并非UI框架，它的定位与Bootstrap、Frozen UI这一类专注于页面呈现的框架不是一回事，或者说，UI框架关注点在HTML，而Vue这一类框架关注点是JavaScript。Vue可以跟很多UI框架搭配使用，比如说Bootstrap（vueBootstrap），和一些专门与Vue配合的例如饿了吗团队开发的element-ui等等。
002-实现第一个VueJS应用.html
1.下载Vue: https://unpkg.com/vue/dist/vue.js
2.将vue.js拷贝到任意一个目录（工作目录）
3.在同一个目录下用编辑软件（随便什么都行，记事本都可以）新建一个文件，输入以下代码：
<script src="vue.js"></script>
<div id="app">
<p>{{title}}</p>
</div>
<script>
new Vue({
el:"#app"
data:{
title: "Hello World!"
}
});
003-扩展这个VueJS应用.html
- 代码如下：
<script src="vue.js"></script>
<div id="app">
<input type="text" v-on:input="changeTitle">
<p>{{title}}</p>
</div>
<script>
new Vue({
el: "#app"
data: {
title: "Hello World!"
}
methods: {
changeTitle:function (event) {
this.title = event.target.value;
}
}
});
</script>
- 试试看，你输入的每一个字符都会被克隆，很有意思的一个程序！
009-VueJS的模板语法和实例.html
- 在上面的例子中，通过创建这个新的Vue实例，注意，虽然没有把它存入一个变量内，Vue实例还是被创建了。
- 通过创建这个Vue实例，就跟我们的HTML代码建立了一个联系，Vue基于上面的HTML代码，创建了一个模版 要特别注意的是，Vue在运行的时候，并不直接使用我们写的HTML代码。实际运行的网页里面也没有我们写的这些命令（最终页面你并看不到大括号之类的东西）
- Vue根据HTML代码创建的模版存储在内部，然后用这个模版，创建真正渲染成DOM的HTML代码，我们写的HTML代码并不是最后在浏览器里面运行的那一份，中间有一层Vue实例把HTML代码转换成模版，然后渲染模版（比如花括号里面的{{title}}｝等) 最终再由它输出渲染后的HTML代码
- Vue实例中存储在data属性内的数据，例如上面的title，可以直接在data属性内修改他们，也可以调用methods里的函数去生成内容。例如：
<script src="vue.js"></script>
<div id="app">
<!-- 注意此处并没有调用Vue模板，而是调用了一个函数 -->
<p>{{sayHello()}}</p>
</div>
<script>
new Vue({
el: "#app"
data: {
title: "Hello World!"
}
methods: {
//此处sayHello是一个方法（函数），但它返回的内容被传送到模版里去了
sayHello:function (event) {
return 'Hello!';
}
}
});
</script>
010-访问Vue实例里的数据.html
- 在vue实例中的任何地方，都可以用this来访问所有的属性和方法
<script src="vue.js"></script>
<div id="app">
<p>{{sayHello()}}</p>
</div>
<script>
new Vue({
el: "#app"
data: {
title: "Hello World!"
}
methods: {
sayHello:function (event) {
//注意此处，return的是Hello World!
//原生的JS是不允许这么调用的，Vue在中间层做了调剂
return this.title;
}
}
});
</script>
011-属性绑定.html
<script src="vue.js"></script>
<div id="app">
<!-- 注意：此处不能用<a href="{{link}}"> 这种形式来传递超链接值，只能用v-bind绑定并设置href的值 -->
<p>{{sayHello()}} - <a v-bind:href="link">Baidu</a> </p>
</div>
<script>
new Vue({
el: "#app"
data: {
title: "Hello World!"
link:"http://baidu.com"
}
methods: {
sayHello:function () {
return this.title;
}
}
});
</script>
012-理解和使用指令
- 指令就是你放在代码中的一些指示
- 例如上面v-bind，它将一些东西和我们的数据（href值）绑定，一般来说如果需要在HTML内直接显示内容的时候，我们采用花括号来解决，但在花括号不适用的时候，就要使用指令。
- 格式： 指令 冒号 参数，如 v-bind:href = "link" link 就是你想要的从Vue实例中绑定的内容，可以是属性或者函数 一般来说你不能给HTML属性传递动态数据，有了这些Vue指令，就可以了
013-用v-once禁止二次渲染.html
- 输入以下代码：
<script src="vue.js"></script>
<div id="app">
<!-- 注意此处的v-once -->
<h1 v-once>{{title}}</h1>
<p>{{sayHello()}}</p>
</div>
<script>
new Vue({
el: "#app"
data: {
title: "Hello World!"
}
methods: {
sayHello:function () {
this.title = 'Hello';
return this.title;
}
}
});
</script>
- 运行以上代码，我们原意是想要一个Hello World!和Hello的，但两个元素都被渲染成Hello了，怎么办？答案是：使用v-once 即在第一个元素h1那里加上一个v-once，则表示该元素只会被渲染一次，之后不能再改变。
014-如何输出基础的HTML.html
- 输入以下代码：
<script src="vue.js"></script>
<div id="app">
<!-- 注意此处的v-once -->
<h1 v-once>{{title}}</h1>
<p>{{sayHello()}}</p>
<!-- 注意：v-html指令让finishedLink以渲染后的HTML格式输出，而不是纯文本
如果以花括号{{finishedLink}} 来表示的话，将会是一个HTML形式的纯文本。
-->
<p v-html = "finishedLink" ></p>
</div>
<script>
new Vue({
el: "#app"
data: {
title: "Hello World!"
finishedLink:'<a href="http://baidu.com">Baidu.com</a>'
}
methods: {
sayHello:function () {
this.title = 'Hello';
return this.title;
}
}
});
</script>
- 以上这段代码并不会输出一个Baidu.com的超链接，而是连同HTML代码一起全部输出了。这样的好处是，HTML元素不会被解析和渲染，而是被输出为纯文本，避免了跨站攻击。
- 但是，如果某些情况下你确实想输出渲染后的HTML代码，比如此处你确实希望看到一个百度的超链接，你就应该使用v-html指令。在需要的元素内嵌入v-html即可。请谨慎使用这个指令，它会把你暴露给XSS攻击，比如此处的内容可能是由用户提交的，你是不能控制用户上传什么内容的，若确定内容安全，或者是由你自己合成的代码，那就可以放心使用v-html
015 作业: 输出数据到模板
- 输出你的姓名和年龄，两者都作为属性保存在data内，在P标签里面输出
<script src="vue.js"></script>
<div id="app">
<p>I am {{name}}</h1>
<p>I am {{age}} years old.</p>
</div>
<script>
new Vue({
el: "#app"
data: {
name: "Rockage"
age: "40"
}
});
</script>
- 在插值语法中，即在大括号中， 使用JavaScript表达式，输出的年龄乘以3 <script src="vue.js">
<script src="vue.js"></script>
<div id="app">
<p>I am {{name}}</p>
<p>I am {{age * 3}} years old.</p>
</div>
<script>
new Vue({
el: "#app"
data: {
name: "Rockage"
age: "40"
}
});
</script>
- 调用函数，输出这个函数的返回值，函数返回一个0到1之间的随机数
<script src="vue.js"></script>
<div id="app">
<p>The Random Number is : {{sayRnd()}}</p>
</div>
<script>
new Vue({
el: "#app"
methods: {
sayRnd: function () {
// random_number = Math.random(); // 产生一个0到1的随机数
// random_number = random_number.toFixed(2) //保留两位小数
// 产生一个1到100的随机数
random_number = Math.floor(Math.random() * (100 - 1 1)) 1
return random_number;
}
}
});
</script>
- 使用baidu， 让一个img标签显示搜索到的图片
- 和超链接的href属性一样，也不允许直接将URL强填进img的src里面，应该把URL存在data里面，绑定到img标签的src属性
<script src="vue.js" xmlns:v-bind="http://www.w3.org/1999/xhtml"></script>
<div id="app">
<img v-bind:src = "url">
</div>
<script>
new Vue({
el: "#app"
data: {
url: "http://img.mp.itc.cn/upload/20170217/1f650c2645c541ad8cc70842d7d0bbe5_th.jpeg"
}
});
</script>
- 用名字预先填充一个TextBox，让它默认显示你的名字
<script src="vue.js" xmlns:v-bind="http://www.w3.org/1999/xhtml"></script>
<div id="app">
Name <input type = "text" v-bind:value = "default_name" />
</div>
<script>
new Vue({
el: "#app"
data: {
default_name: "Hua Yang"
}
});
</script>
017-监听事件.html
- 通过指令v-on监听来自模版的事件
- v-on 可以监听任何由这个按钮产生的DOM事件
- 格式： v-on:事件名称 = "事件函数名"，如v-on:click = "increase"
<script src="vue.js"></script>
<div id="app">
<button v-on:click="increase">Click Me</button>
<p>{{ counter}}</p>
</div>
<script>
new Vue({
el: "#app"
data: {
counter: 0
x: 0
y: 0
}
methods: {
increase: function () {
this.counter ;
}
}
});
</script>
018-从事件对象里获取事件数据.html
- 用v-on来获取事件数据
- 这个例子很好地说明了如何通过Vue传递事件对象
<script src="vue.js"></script>
<div id="app">
<p v-on:mousemove="updateCoordinates">Coordonates : {{x}}/{{y}}</p>
</div>
<script>
new Vue({
el: "#app"
data: {
counter: 0
x: 0
y: 0
}
methods: {
updateCoordinates: function (event) {
this.x = event.clientX;
this.y = event.clientY;
}
}
});
</script>
019-传递你自己的事件参数.html
- 给组件传递自定义参数，方法很简单，在调用函数或者说设置引用时传入参数即可。
- 加入不仅要传递自定义参数，还要传递DOM生成的事件对象给方法，也很简单，只需要再加一个参数，但这个参数的命名需为$event，vue会自动捕捉这个默认的事件参数，并复制给一个可以在函数中使用的变量。
- 本例中不对$event做详解，下面的例子会提到它
<script src="vue.js"></script>
<div id="app">
<!--
请注意 调用increase时增加了两个参数
-->
<button v-on:click="increase(2 $event)">Click Me</button>
<p>{{ counter}}</p>
</div>
<script>
new Vue({
el: "#app"
data: {
counter: 0
x: 0
y: 0
}
methods: {
// increase 函数用step和event接收参数
increase: function (step event) {
this.counter = step;
}
}
});
</script>
020-用事件修饰符来修改事件.html
- 现在我们用第11课（鼠标悬浮显示XY坐标）那个为例
- 我想设置一个区域，姑且称为DEAD SPOT 鼠标进入这个区域XY停止更新。
- 常规方法是让这个SPAN也绑定一个mousemove事件，然后调用一个事件函数，事件函数不做任何处理。
HTML部分：
<span v-on:mousemove = "dummy">DEAD SPOT</span>
JS部分：
dummy: function(){
event.stopPropagation();
}
以上代码确保事件不会传播给绑定有这个属性的SPAN上，当然，我们还有更简单的方法，就是使用事件修饰符，使用stop修饰符即可实现这个目的：
<script src="vue.js"></script>
<div id="app">
<p v-on:mousemove="updateCoordinates">Coordonates : {{x}}/{{y}}
<!-- 请注意下面这个SPAN绑定的事件mousemove
采用了.stop修饰符，表示此元素的mousemove事件不做任何处理
-->
- <span v-on:mousemove.stop = "">DEAD SPOT</span>
</p>
</div>
<script>
new Vue({
el: "#app"
data: {
counter: 0
x: 0
y: 0
}
methods: {
updateCoordinates: function (event) {
this.x = event.clientX;
this.y = event.clientY;
}
}
});
</script>
021-监听键盘事件.html
- 这个例子很简单，在输入框中监控键盘事件
- 一旦敲入回车键，则弹出Alert窗口。
<script src="vue.js"></script>
<div id="app">
<input type = "text" v-on:keyup.enter="alertMe" />
</div>
<script>
new Vue({
el: "#app"
data: {
counter: 0
x: 0
y: 0
}
methods: {
alertMe: function () {
alert("Alert!");
}
}
});
</script>
022-作业：事件
- 作业2-1：按下按钮，弹出警告框。
<script src="vue.js"></script>
<div id="app">
<button v-on:click="alertMe">Show Alert</button>
</div>
<script>
new Vue({
el: "#app"
data: {
counter: 0
x: 0
y: 0
}
methods: {
alertMe: function () {
alert("You Clicked me!");
}
}
});
</script>
- 作业2-2：记录键盘输入的值，存到data里并立即显示。
- 特点1： 除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法，即不再绑定一个函数，直接在调用的时候执行JS语句，这种方法适用于函数体很短，只有一行的函数。
- 特点2：采用了Vue的关键字$event，它表示JavaScript自动生成的默认事件对象，它保存了许多重要信息，如事件的目标元素等。而这里，目标元素就是输入框，输入框有一个value属性，它就是用户输入值的来源，可以借由这个事件对象（$event）来访问它的目标元素（target） 再访问它的属性(value) 并赋值给变量myValue.
- 如果不采用内联的方式，也可以在此绑定一个事件函数，然后将$event作为参数传递进去，以同样的方法在事件函数中访问value并赋值给myValue，效果一样。
<script src="vue.js"></script>
<div id="app">
<input v-on:keydown = "myValue = $event.target.value" type="text"/>
<p>{{myValue}}</p>
</div>
<script>
new Vue({
el: "#app"
data: {
myValue: ''
}
});
</script>
- 作业2-3：记录键盘输入的值，存到data里，但只有按下enter才更新显示。
- 这题很简单，在上题的基础上增加一个.enter就可以了
<script src="vue.js"></script>
<div id="app">
<input v-on:keydown.enter = "myValue = $event.target.value" type="text"/>
<p>{{myValue}}</p>
</div>
<script>
new Vue({
el: "#app"
data: {
myValue: ''
}
});
</script>
024-在模板中编写JS代码.html
- 在所有能访问Vue实例的地方，无论是监听鼠标点击事件还是输出counter 只要访问了Vue实例， 就可以使用任何合法的JavaScript代码，只要它是一个简单表达式即可，当然这个表达式中不能有if或者for循环等复杂语句。这就是所谓的“内联”调用法
- 例如上面那个鼠标点击按钮增加数字的例子，因为逻辑足够简单，我们甚至在v-onclick里都不需要绑定任何函数，而是可以直接让它执行一条语句，也就是说在调用的时候就直接写成counter 即可。当然，如果程序逻辑比较复杂，不足以用一条语句表达，那么还是老老实实编写一个函数并绑定到事件里为好。
- 在模板中也可以直接插入表达式，例如像{{counter * 2}}这样的表达式。
- 当然，我们还以用简短的“三元表达式”，这种表达式是if语句的一个变种，能够在一行内完成对变量的判断。
<script src="vue.js"></script>
<div id="app">
<!-- 此处取消了事件函数，直接用counter 代替 -->
<button v-on:click="counter ">Click Me</button>
<!-- 此处直接修改模板counter的值 -->
<p>{{ counter * 2}}</p>
<!-- 此处是一个三元表达式，用以判断counter的值 -->
<p>{{ counter * 2 > 10 ? 'Greate than 10' : 'Smaller than 10'}}</p>
</div>
<script>
new Vue({
el: "#app"
data: {
counter: 0
}
});
</script>
025-使用双向绑定.html
- 某些情况下，我们需要一边同时监听事件，一边实施更新数据的时候就要用到双向绑定。
- Vue的双向绑定真的非常简单，只需要在监听的的元素上加一个v-model即可
- 其实用v-bind v-on加上事件函数，也能够实现这个功能，但是显然v-model要简单、清晰许多。
<script src="vue.js"></script>
<div id="app">
<input type = "text" v-model = "name">
<p>{{name}}</p>
</div>
<script>
new Vue({
el: "#app"
data: {
name: ''
}
});
</script>
026-用计算属性来响应改变.html
- 目前为止，我们已经学会了两种Vue的属性：data methods，一个放置数据，一个放置函数，现在引入第三个属性：computed
- 先大致梳理一下本例子的效果：
- 界面有3个按钮，两个计数器，第一个按钮是计数器1增加，第二个按钮是计数器1减少，第三个按钮是计数器2增加
- 另有1行文本，当counter1大于5时候显示：Greater than 5， 当counter1小于5时显示：Smaller than 5
- 注意：counter2并没有做这样的判断
- 为了实时监控counter1的值，这里运用了两种同步方法，第一种是在methods里写一个事件函数result
- 另一个办法是运用computed，写一个事件函数output
- 乍看上去，两者代码是相同的，并没有什么区别，但实际区别是：
- 1、在调用方法上，写在methods的函数是带括号调用的，即: result() 这样的形式来调用
- 2、写在computed的函数并不需要像调用函数那样调用，省略了括号，直接像调用data一样：output
- 事实上，对于最终的结果，两种方式确实是相同的，那么问题来了，有了methods不就可以了吗？我们为什么还多此一举冒出一个computed呢？
- 答案揭晓：
- 1、在Vue内部，computed属性是基于他们的依赖的数据进行缓存的 只有在它相关的依赖发生改变时才会重新求值，与之不相关的数据变化的时候它不会做出任何动作。
- 2、method则不同，只要页面有所变化（重新渲染） 它总会被执行，无论数据是否与之相关。
- 为了验证以上结论，我们在界面上再放一个按钮，再增加一个变量counter2，注意，这个按钮和变量和counter1八竿子打不着关系，完全是一个独立的东西。
- 按下F12键，进入浏览器调试模式，观察console控制台输出
- 现在按下Increase Counter 1或Decrease Counter 1
- counter1的值开始发生了变化，并且控制台出现：Here is Computed 和 Here is Methods 两行字
- 这是因为改变counter1值的时候，同时触发了基于methods的result函数，和基于computed的output函数
- 以上逻辑容易理解，说得通！
- 现在，按下Increase Counter 2按钮，这时候counter2的值开始增大了，但是诡异的是，控制台显示:Here is Methods
- 这是为什么呢？明明result函数里没有任何一处是跟counter2有关系的，那为什么每次改变counter2的时候程序会跳进result函数里呢？
- 这正好印证了我们上面说过的一个结论：“只要页面有所变化（重新渲染） 它总会被执行，无论数据是否与之相关”
- 刷新的虽然是counter2，但是请注意：只要页面被重新渲染，它总是会被执行。
- 不言而喻，如果是很复杂的页面，反复去执行一个与之无关的函数，效率开销肯定是很大的。
- 所以我们需要computed属性，这个属性只处理与之相关的变量（例如本例中的counter1） 而与之无关的变量（counter2）即使发生变化，即使页面被重新渲染了，它也不会被执行。
- 大部分时候我们选择computed就对了，但是有时候我们就是希望某些数据不要经过缓存，就是想让它直截了不停刷新并显示的时候，选择methods
<script src="vue.js"></script>
<div id="app">
<button v-on:click="counter1 ">Increase Counter 1</button>
<button v-on:click="counter1--">Decrease Counter 1</button>
<button v-on:click="counter2 ">Increase Counter 2</button>
<p>Counter:{{counter1}} | {{counter2}}</p>
<!-- 注意两种调用方法是不同的 -->
<p>Counter 1 Result: {{result()}} | {{output}}</p>
</div>
<script>
new Vue({
el: "#app"
data: {
counter1: 0
counter2: 0
}
computed: {
output: function () {
console.log('Here is Computed')
return this.counter1 > 5 ? "Greater than 5" : "Smaller than 5"
}
}
methods: {
result: function () {
console.log('Here is Methods')
return this.counter1 > 5 ? "Greater than 5" : "Smaller than 5"
}
}
});
</script>
027-计算属性的替代：观察改变.html
- 现在再加入一个新的属性：watch
- watch是Vue提供了另外一种处理数据依赖的方法，其最终效果其实和上例的methods和computed差不太多，不同的地方在于：
- 在computed属性里面我们设置需要计算的属性（如上例的output），然后在函数体里设置计算这个属性(output)的逻辑。
- watch则采用的是另外一种机制，把想要侦听的属性名称设置为键， 而这个键必须是在data(或者computed)里面能够找到的，例如上例的counter1或counter2 键名必须与data里面的属性名称相同。
- 在watch中定义一个和属性名相同的函数，即当属性值发生变化时需要执行的代码，Vue会自动把属性变化之后的数值传递给该函数。
- 从结果而言，既然说watch和computed的作用相当，那我们为啥非要用watch不可呢？因为watch是异步执行的。
- computed只能执行同步任务，也就是说在它return的时候，必须立即返回一个结果，中途不能执行异步任务（例如定时器或者访问服务器等等）。
- 比如说，你需要一个值，在两秒之后更新，就必须用 watch
- 理论上，在Vue实例里，总是可以用this访问其自身（请参见前面的内容），但在回调闭包中却不行，定时器函数（setTimer）是一个典型的回调闭包的例子，因此不能在其中直接访问this，而是要用一个变量先保存起来，以便在setTimer函数中使用。
- 当然，你也可以尝试一下把这段代码中的 watch 改成 computed 去试试看，结果就是只会清0一次，然后代码就不再执行了。
- 大部分情况下，建议使用computed，因为它拥有最佳的速度，但是在执行异步任务的时候，我们只能选择watch <script src="vue.js"></script> <div id="app"> <button v-on:click="counter1 ">Increase Counter 1</button> <p>Counter:{{counter1}}</p> </div> <script> new Vue({ el: "#app" data: { counter1: 0 } watch: { counter1: function (value) { // 注意：回调闭包中不允许直接使用this // 因此此处需要先用一个变量vm来保存this var vm = this; setTimeout(function () { vm.counter1 = 0 } 2000) } } }); </script>
028 - 用缩写来节省时间
- Vue里有两个使用频率很高的指令：v-on和v-bind 这两个指令可以用@符合和:符号来替代
- 例如像这样的代码是完全符合语法的：
- 用@号替代v-on: <button @click="counter1 ">Increase Counter 1</button>
- 用:号替代v-bind: <a :href="link">Baidu</a>
029 - 作业：响应式属性
- 1. 用computed属性完成对value的判断，等于37的时候result显示Done 不等于的时候显示Not there yet
<!-- 作业3问题：响应式属性 - 作业1 -->
<script src="vue.js"></script>
<div id="app">
<button v-on:click="value = 5">Add 5</button>
<button v-on:click="value = 1">Add 1</button>
<p>{{result}}</p>
</div>
<script>
new Vue({
el: "#app"
data: {
value: 0
}
computed: {
result: function () {
return this.value == 37 ? "Done" : "Not there yet"
}
}
});
</script>
- 2. 监视变量value，当它有变化的时候触发定时器，5秒后将它归零
- 这一题有几个重点：
- 1、watch 不仅可以监控data里的属性，也可以监控computed里面的属性(如result)
- 2、通过vm可以修改data里的属性（如value） 但是不能修改computed里的result
- 3、本例是一个循环监控的例子：起初是按钮改变了value的值，value==37改变了result的值，result触发了定时器，定时器又改变了value的值，value的值又反过来影响了result的值
<script src="vue.js"></script>
<div id="app">
<button v-on:click="value = 5">Add 5</button>
<button v-on:click="value = 1">Add 1</button>
<p>Current Value:{{value}} </p>
<p>{{result}}</p>
</div>
<script>
new Vue({
el: "#app"
data: {
value: 0
}
computed: {
result: function () {
return this.value == 37 ? "Done" : "Not there yet"
}
}
watch: {
result: function () { //watch可以监听computed里的属性
var vm = this;
setTimeout(function () {
vm.value = 0
// 但无法修改computed里定义的属性，即如果写成 vm.result = "XXX" 则程序会报错
} 5000)
}
}
});
</script>
031-CSS类动态样式-基础.html
- 设置CSS，demo是一个div块，red是颜色
- 监听click事件，并修改attachRed的值（只有一行代码，即将attachRed取反）
- 设置class值，修改div的class属性，相当于在red: true和red: false之间互相切换。
- 整个过程实际上由两部分完成，@click事件更改attachRed的值，而:class则负责根据attachRed的值反复设置css
<style>
.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}
.red {
background-color: red;
}
}
</style>
<script src="vue.js"></script>
<div id="app">
<div
class="demo"
@click="attachRed = !attachRed"
:class="{red: attachRed}"
></div>
</div>
<script>
new Vue({
el: "#app"
data: {
attachRed: false
}
});
</script>
032-CSS类动态样式-使用对象
- 接上一个例子，如果我们想让div块在红色和蓝色之间切换怎么办呢？
- 首先在style里增加一个css的blue类： .blue { background-color: blue; } -然后把class属性改成这样： :class="{red: attachRed blue: !attachRed}"
- 即当attachRed为True时采用red，而当attachRed为False的时候采用blue类。
- 现在，这个对象变长了，而且将来随着页面的复杂还将越来越长，如果我们不想把这一行代码写进HTML模板里该怎么办呢？我们可以把样式对象作为Vue实例内的计算属性来处理。定义一个computed(计算)函数名称为：divClasses，然后用这个函数它来返回Javascript对象。
- 完整代码如下：
<style>
.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
<script src="vue.js"></script>
<div id="app">
<div
class="demo"
@click="attachRed = !attachRed"
:class="divClasses"
></div>
</div>
<script>
new Vue({
el: "#app"
data: {
attachRed: false
}
computed: {
divClasses: function () {
return {
red: this.attachRed
blue: !this.attachRed
}
}
}
});
</script>
033-CSS类动态样式-使用命名
- 传统的HTML语法里，一个元素套用某个CSS类是用class = "类名"
- 而在Vue里面，则使用 :class = "表达式"，这个表达式可以是：
- 1、 直接使用 CSS类名
- 2、 使用对象，类名：布尔值，如red: true或red: false
- 3、 computed里return的对象 （如同上一个例子那样）
- 4、 数组（CSS列表），Vue会自动解析列表中的对象
- 原理：
- 默认情况下，本例中第二个div块为green 现在清空输入框，div框变灰色，因为它找不到对应的css值了。
- 这个输入框是这样设置的 :class="[color {red: attachRed}]"，数组中有两个值：
- 第一个元素color表示直接用css的类名来设置css的值
- 第二个元素{red: attachRed}能否成立，要看布尔值attachRed是否为true？
- 两个值其中任何一个成立，css设置生效，在初始时：
- 数组元素1：{red: attachRed}不成立，因为attachRed为false
- 数组元素2：color成立，因为默认为green 所以div块为绿色
- 清空输入框后，数组元素 color 不成立了，加之数组元素 {red: attachRed} 本来就不成立，因此div块变成灰色
- 此时，如果我们点一下第一个div块，则第二个div块也跟着变成了红色，分析：
- 现在尽管 color 还是不成立，但是 {red: attachRed} 成立了，于是第二个div块跟着变成了红色
<!-- 033-CSS类动态样式-使用命名 -->
<style>
.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
</style>
<script src="vue.js"></script>
<div id="app">
<div
class="demo"
@click="attachRed = !attachRed"
:class="divClasses"
></div>
<div
class="demo"
:class="[color {red: attachRed}]"
></div>
<hr>
<!-- 此处输入框双向绑定了color属性，即键盘输入的内容会即时作为CSS类名传到HTML中去 -->
<input type = "text" v-model = "color">
</div>
<script>
new Vue({
el: "#app"
data: {
attachRed: false
color:'green'
//color属性默认为green，请注意由于双向绑定的原因，green这个字符串也会同时传递到输入框里
}
computed: {
divClasses: function () {
return {
red: this.attachRed
blue: !this.attachRed
}
}
}
});
</script>
章节2课时34-动态设置样式（不使用CSS类）
- 本课学习不用css的class直接设置css格式
- 上例中，我们要事先定义三个css背景颜色的class，然后用 :class 这样的方式去套用，现在转换一种方法：
- 直接在div中设置css属性，例如 background-color
- 可以看到，本例中完全没有设置red blue green这三个class 在div块中是这么处理的：
<div class="demo" :style="{'background-color':color}"></div>
- 现在我们用 :style 来直接设置 background-color，注意格式，必须用单引号括起来，因为中间有连字符，如果不用单引号，那就必须改成 backgroundColor 这样的驼峰命名法，那么color是怎么来的呢？请看这一行：
data: { color: 'grey' width: 100}
- 以及这一行：
<input type="text" v-model="color">
- vue实例中，我们定义了一个color变量（默认grey），再用v-model双向绑定在一个input输入框中，于是我们在输入框中输入任何符合css规则的颜色字符串可以同步生效在div框中（区别于上一个例子，我们只能输入red green和blue），本例中我们可以输入yellow gold black等等等等，只要符合css语法的颜色都能生效而无需事前定义相对应的class
- 本课中的第二个div块演示的是用类似的方法设置多个属性，比如同时设置color和width
- 完整代码中，我们通过计算方法设置一个myStyle对象，第二个div块直接用:style="myStyle"来套用这个对象，以达到同时设置背景颜色和宽度的目的。
- 完整代码如下：
<!-- 章节2课时34-动态设置样式（不使用CSS类） -->
<style>
.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}
</style>
<script src="vue.js"></script>
<div id="app">
<div class="demo" :style="{'background-color':color}"></div>
<div class="demo" :style="myStyle"></div>
<hr>
<input type="text" v-model="color">
<input type="text" v-model="width">
</div>
<script>
new Vue({
el: "#app"
data: {
color: 'grey'
width: 100
}
computed: {
myStyle: function () {
return {
backgroundColor: this.color
width: this.width 'px'
}
}
}
});
</script>
- 章节2课时35-用数组语法设置元素样式 有了上一节课的铺垫，这一节课理解起来会显得很容易。 本例中我们增加了第三个div块，而这个div块是采用数组语法来设置css样式的，参见代码： <div class="demo" :style="[myStyle {height: width 'px'}]"></div> 这个div块的 :style 是由一个数组构成的，有两个元素： myStyle 和 {height: width 'px'} myStyle 跟上一个例子一模一样，不再赘述，第二个元素表示追加一个css属性: height 这个例子中，我们并没有在vue实例的计算属性中添加 height 这个属性，但它依然生效，也就是说，在一个div块中，我们套用css样式的方法是多种多样的，现在总结一下： 第一个div框中，直接采用css关键字 'background-color' 第二个div框中，采用计算方法（ computed ）return 一个css样式（多属性） 第三个div框中，采用数组的方式设置css，在这个框中，我们同时采用了计算方法和css关键字直接设置法，相当于第一个div框和第二个div框的合体。 完整代码如下：
<!-- 章节2课时35-用数组语法设置元素样式 -->
<style>
.demo {
width: 100px;
height: 100px;
background-color: gray;
display: inline-block;
margin: 10px;
}
</style>
<script src="vue.js"></script>
<div id="app">
<div class="demo" :style="{'background-color':color}"></div>
<div class="demo" :style="myStyle"></div>
<div class="demo" :style="[myStyle {height: width 'px'}]"></div>
<hr>
<input type="text" v-model="color">
<input type="text" v-model="width">
</div>
<script>
new Vue({
el: "#app"
data: {
color: 'grey'
width: 100
}
computed: {
myStyle: function () {
return {
backgroundColor: this.color
width: this.width 'px'
}
}
}
});
</script>
