龙空技术网

从零开始Vue基础教程

深圳小不点音频 1584

前言:

现时兄弟们对“vue简易教程”大致比较珍视,咱们都想要学习一些“vue简易教程”的相关资讯。那么小编同时在网摘上收集了一些有关“vue简易教程””的相关文章,希望小伙伴们能喜欢,兄弟们一起来了解一下吧!

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:

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:";           },           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=";>Baidu.com</a>',      },      methods: {          sayHello:function () {              this.title = 'Hello';              return this.title;          }      }  });</script>
以上这段代码并不会输出一个Baidu.com的超链接,而是连同HTML代码一起全部输出了。这样的好处是,HTML元素不会被解析和渲染,而是被输出为纯文本,避免了跨站攻击。但是,如果某些情况下你确实想输出渲染后的HTML代码,比如此处你确实希望看到一个百度的超链接,你就应该使用v-html指令。在需要的元素内嵌入v-html即可。请谨慎使用这个指令,它会把你暴露给XSS攻击,比如此处的内容可能是由用户提交的,你是不能控制用户上传什么内容的,若确定内容安全,或者是由你自己合成的代码,那就可以放心使用v-html015 作业: 输出数据到模板输出你的姓名和年龄,两者都作为属性保存在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=";></script><div id="app">  <img  v-bind:src = "url"></div><script>  new Vue({      el: "#app",      data: {          url: ";      }  });</script>
用名字预先填充一个TextBox,让它默认显示你的名字
<script src="vue.js" xmlns:v-bind=";></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 1counter1的值开始发生了变化,并且控制台出现: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现在再加入一个新的属性:watchwatch是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里的result3、本例是一个循环监控的例子:起初是按钮改变了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: false3、 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>

标签: #vue简易教程