vue的学习与简单的总结_class="{'text-danger': server.mem.usage

本文链接：https://blog.csdn.net/qq_41799629/article/details/89018076

一：定义

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架，Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，是一套构建用户界面的渐进式框架，Vue 只关注视图层，采用自底向上增量开发的设计。

二： vue.js起步

var vue=new Vue({
   el:'#vue_test'//对应html中标签元素的编号id
   ,data:{
       age:12,
       name:"李中"
   },
   methods:{//写方法有二种方式
       way:function(agrs arg){//方式一
           return "集中精力于当下";
       },
       way2(agrs arg){//方式二

       }
   }
});
取data中的数据的方式有{{age}},{{vue.age}},{{data.age}}
取methods中的方法为{{way(arg)}}

三：模块语法

1：使用 v-html 指令用于输出 html 代码 2：HTML 属性中的值应使用 v-bind 指令(v-bind:class="{'class1': use}") 它的缩写为:

例如： <a v-bind:href="url"></a>  <a :href="url"></a>

3：是 v-on (它的缩写为@)指令，它用于监听 DOM 事件(v-on:click="doSomething") 4：修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：<form v-on:submit.prevent="onSubmit"></form>

5：在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

6：过滤器{{ message | filterA('arg1', arg2) | filterB }}

四：条件与循环

1：v-if v-else-if v-else v-show(是否显示的指令)

2：<li v-for="site in sites"> <li v-for="(value, key, index) in object">

五：计算机属性computed有依赖缓存，而methods没有

computed: { site: { // getter get: function () { return this.name + ' ' + this.url }, // setter set: function (newValue) { var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } }

六：监听属性watch

1:http://www.runoob.com/vue2/vue-watch.html

七：class 属性绑定

1：<div v-bind:class="{ active: isActive }"></div>

2：v-bind:class="{ active: isActive, 'text-danger': hasError (这里也可以是一个对象的形式)}"但是text-danger会对active进行属性的覆盖。

3：综合学习网址：http://www.runoob.com/vue2/vue-class-style.html

八：事件处理器

1：学习网址：http://www.runoob.com/vue2/vue-events.html

九：表单

1：学习网址：http://www.runoob.com/vue2/vue-forms.html

Vue的总学习教程：http://www.runoob.com/vue2/vue-tutorial.html