VUE.js学习笔记--vue的使用

什么是vue.js

官方说明：是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js的特性

• 1、MVVM模式
  M: model 业务模型，用处：处理数据，提供数据
  V: view 用户界面、用户视图
  业务模型model中的数据发生改变的时候，用户视图view也随之变化。用户视图view改变的时候，业务模型model中的数据也可以发生改变。
• 2、组件化
• 3、指令系统
• 4、Vue.js 2.0开始支持虚拟DOM（Vue.js 1.0 是操作的真实DOM，而不是虚拟DOM）
  虚拟DOM可以提升页面的刷新速度。

安装vue.js

官网：https://cn.vuejs.org/v2/guide/installation.html

点击下载

点击开发版本将代码拷贝出来，放入新建的js文件中，就可以在自己的页面使用script标签引入啦

使用vue.js

Vue.js提供了一个vue对象，要使用vue.js 需要把它new出来

el的作用是声明vue对象的作用边界，绑定上面dom标签的id
data的作用是存放显示在页面中的数据，在标签中以{{}}来获取。
我们知道vue是一个mvvm框架，前端的html页面相当于view，data对应的是后端的model，而我们new出来的vue对象则代表桥接前后端的view-model。也是整个mvvm框架的核心！

绑定文本data

下面是一个简单的hello world小栗子

举个栗子

运行页面显示hello world

绑定元素特性

不光可以绑定文本值，还可以对一些元素特性进行绑定 如：

        鼠标悬停触发

Js文件：

let app2 = new Vue({
    el:'#app2',
    data:{
        message:'hi~~ 平田君~~'
    }
})

展示效果，是不是很方便啦

hi,又见面了平田君~~

这里的v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
当然这个指令可以简写为“：”即v-bind:title等效于:title

绑定函数

例如：

    

        
{{content}}
    

Js：

let root = new Vue({
    el : "#root",
    data:{
        content : "hello"
    },
    methods: {
        handleClick: function(){
            if(this.content === 'hello')
            this.content = "world"
            else
            this.content = "hello"
        }
    }
})

这段代码通过v-on将鼠标点击事件click与vue函数handleclick绑定到一起，当发生鼠标点击事件的时候执行handleclick函数，将在hello 和 world之间来回切换
同样的v-on:click也可以简写为@click

双向绑定

       
       
{{content}}
   

单项属性绑定value的时候 输入东西content不发生变化

    

        
        
{{content}}
    

使用v-model 可以实现双向绑定，效果如下，当输入框中数据发生变化的时候vue对象中data里的content属性也会跟着发生相应的变化。

计算属性

     +
     =
    {{sum}}

Js代码：

let ex = new Vue({
    el:"#ex",
    data:{
        one : "",
        two : "",
    },
    computed:{
        sum : function(){
           return Number(this.one) + Number(this.two)
        }
    }
})

通过computed将sum绑定到div，可以实现函数运算返回

侦听器

watch:{
    sum : function(){
        this.count++
    }
}

使用watch可以对元素进行侦听，上面例子是对sum进行监听，当sum值发生变化的时候count进行自增，用来统计计算sum的次数

因为是即时计算，输入了5次也就说明计算了5次

条件与循环指令

控制一个元素的显示与否也是很简单的 我们可以使用v-if和v-show来做
我们变个戏法

    
{{count}}
    {{fashu}}

Js代码：

let ex = new Vue({
    el:"#root",
    data:{
        count:"戏法---->",
        show:true,
        fashu:"雾隐雷藏"
    },
    methods:{
        oneTick:function(){
            this.show = !this.show;
            if(this.fashu==="雾隐雷藏")
                this.fashu = "明心见性";
            else if(this.fashu==="明心见性")
                this.fashu = "雾隐雷藏";           
        }
    } 
})

消失了

效果可见我们给button绑定了一个点击事件，当触发事件的时候修改了上面div的show的值，当show为true的时候戏法----> 是显示状态当为false的时候就消失了，
同样的我们可以把v-if变为v-show 得到的效果是一样的
但是区别肯定会有的，让我们荡起双桨（啊呸。。。）打开控制台

当时v-if的时候我们可以发现施展雾隐雷藏的时候会吧div删除掉，然后明心见性的时候再创建一个

而当v-show的时候则是增加一条css属性display:none，显示的时候再去掉。

至于开发中我们如何选择就看业务需求啦~~
循环指令是用v-for来实现的：

        

            
{{tool}}
        
  

Js代码：

let ab = new Vue({
    el:"#root1",
    data:{
    tools:["A","B","C"]
}

展示效果

标签中也可以写为v-for="tool in tools"
另外在使用v-for的时候可以增加一个key的属性，可以提升页面的渲染速度，一个循环里的key是不可以重复的。

{{tool}}

考虑到tool有可能是重复的，也可以用下面的方法

{{tool}}

效果相同

总结

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

• v-bind：指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性，v-bind:可以缩写为“：”
• v-on：指令用于给监听DOM事件，它的用语法和v-bind是类似的，v-on:可以缩写为“@”
• v-model：双向绑定
• v-if：是条件渲染指令，它根据表达式的真假来删除和插入元素
• v-show：也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。
• v-else：可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。v-else元素是否渲染在HTML中，取决于前面使用的是v-if还是v-show指令。
  如果if指令为true，则else不会被渲染，如果show指令为true则else一样会渲染到html页面，不过是style为none
• v-for：基于一个数组渲染一个列表，它和JavaScript的遍历语法相似。