vue .js语法总结

Vue.js总结

Vue.js是一套构建用户界面的渐进式框架。它只关注视图层，采取自底向上增量开发的设计。目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

1. vue.js安装(两种方法)

1）使用 CDN 方法：

<script src="./js/vue.js"></script>

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

 

2）使用NPM方法： 直接在cmd命令里面安装或者在gitbash里面安装

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

1)允许用户从NPM服务器下载别人编写的第三方包到本地使用。

2)允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

3)允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

2. vue实例以及基本语法

var vm = new Vue({

  // 选项}）

//vue构造器中的内容基本都是对象

var vm = new Vue({

 el: '#app',

data: { message:”123”},

methods: { //定义的函数，可以通过 return 来返回函数值。

})

Html:

在html中引用：

<div class=”app”>{{message}}</div>

1. Vue模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

插值：

1. 文本：数据绑定常用{{}}

   表达式：{{isfo?color:font}}

1. Html:用v-html

    如：<div v-html=”message”></div>

详细：更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模行编译 。如果试图使用v-html 组合模板,可以重新考虑通过是否通过使用组件来替代。注意：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致XSS攻击。只在可信内容上使用v-html，永不用在用户提交的内容上。

 

1. 指令 v-

   （1）v-if ,v-else,v-else-if用法：

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定

组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。

   （2） v-bind：这个指令用于响应地更新 HTML 特性，比如绑定某个class元素或元素的style样式。Eg: 分页功能中当前页数高亮的效果，可以使用bind指令。

//css代码
<style>
        .spanleft{
            color: red;
        }
        .spanright{
            font-size: 30px;
        }
</style>

html代码：
<div class="b">
    <span v-bind:class="s_name"><!--单个绑定-->
        {{str}}
    </span><br>
    <!--添加多个 必须用[]-->
    <span v-bind:class="[s_name1,s_name]">
        {{str}}
    </span><br>
    <!--判断是否添加-->
    <span v-bind:class="{spanleft:iscolor,spanright:iscolor}">
        {{str}}
    </span>
</div>

vue代码：
<script>
    new Vue({
        el:".b",
        data:{
            str:"叶子",
            s_name:"spanleft",
            s_name1:"spanright",
            iscolor:true
        },
        methods:{
            showname:function(){
                this.iscolor=!this.iscolor;
            }
        }
    })
</script>

结果：

1. v-on:

        为元素添加并更新事件监听器，参数可以是一个处理函数或者一个函数语句。

1. v-model:

指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数绑定，根据表单上的值，自动更新绑定的元素的值。小栗子：

<div id="app">
    <select v-model="selected" name="fruit">
        <option value="">选择一个网站：</option>
        <option value="www.baidu.com">Baidu</option>
        <option value="www.goole.com">Google</option>
    </select>
    <div id="output">
        选择的网站是：{{selected}}
    </div>
</div>

<script>

new Vue({
    el:'#app',
    data:{
        picked:'Baidu',
        selected:''
    }
})

 </script>

结果：

1.  v-show:

         用法：根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。

注意： v-show 不支持 <template> 语法

html代码：
<div class="app">
    <ul>
        <li v-on:click="show=!show">点我</li>
        <li v-show="show" v-bind:style="styobj">动画</li>
    </ul>
</div>
vue代码：
<script>
    new Vue({
        el:'.app',
        data:{
            styobj:{color:'red',fontSize:'30px'},
            show:true
        }
    })
</script>

结果：

1. v-for：

用法：v-for="item in items", items是数组，item为数组中的数组元素。

html代码：
<div class="app"> 
    <li v-for="value in object">
        {{value}}
    </li>
</div>

vue代码：
<script>
    new Vue({
        el:".b",
        data:{
            sites:[
                {name:'bob'},
                {name:'marry'},
                {name:'angle'}
            ],
            object:{
                name:"叶子时光",
                url:"http://www.yezi.com",
                slogan:"远方的风比远方更远！"
            }
        }
    })
</script>

结果：

1. v-once ：

让数据绑定一次性会影响当前节点的其他数据绑定.

1. v-attr:

用法：更新所在元素的某些属性（由参数表示）

<canvas v-attr="width:w, height:h"></canvas>

1. v-style：

用法：这个指令有一个可选参数，无参数时，若绑定值为String则将绑定值设置为元素的style.cssText,若绑定值为Object则将Object中的样式键值对放入元素的style object当中。

<div v-style="myStyles"></div>

1. 自定义指令

除了内置指令，Vue.js 也允许注册自定义指令。自定义指令提供一种机制将数据的变化映射为 DOM 行为。可以用 Vue.directive(id, definition) 方法注册一个全局自定义指令，它接收两个参数指令 ID 与定义对象。也可以用组件的 directives 选项注册一个局部自定义指令。

1. 自定义全局指令：

 //全局注册
       Vue.directive('focus',{
        inserted:function(el){ //inserted  被绑定元素在插入父元素的时 候执行
            el.focus()
           }
       })
      new Vue({
         el:'#app'
       })

1. 自定义局部指令：

<div class="app">
    <input v-focus>
</div>

new Vue({
    el:'.app',
    //注册局部自定义指令
    directives:{
        focus:{
            //指令定义
            inserted:function(el){
                el.focus()
            }
        }
    }
})

栗子：

<div class="app">
    <div v-runoob="{color:'green',text:'叶子时光'}">叶子时光</div>
</div>
<script>
    Vue.directive('runoob',function(el,binding){
        el.style.backgroundColor=binding.value.color;
        el.innerHTML=binding.value.text;
    })
    new Vue({
        el:'.app',
        data:{
            str:"ssss"
        }
    })
</script>

结果：

 

钩子函数

定义对象可以提供几个钩子函数（都是可选的）：

bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次

初始化动作。

inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update:被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值

可以忽略不必要的模板更新（详细的钩子函数参数见下）。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次， 指令与元素解绑时调用。

指令实例属性

所有的钩子函数将被复制到实际的指令对象中，钩子内 this 指向这个指令对象。  

1. 计算属性

在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。所以需要用计算属性。

计算属性技巧：1.可以依赖于其它计算属性
               2.可以依赖其他实例的数据
1)computed计算属性:返回的是结果。Computed是基于它们的依赖进行缓存的，只有相关依赖会发生改变时才会重新求职。只要相关依赖未改变，只会返回之前的结果，不再执行函数。

栗子：

<div class="app">
{{fn}}
</div>
<script>
    var vue=new Vue({
        el:".app",
        data:{
                 a:1,
                 b:2
        },
        computed:{
            fn:function(){
                return this.a+this.b;
            }
        }
    })
</script>

结果：3

2)Medthod方法:只要重新渲染，它就会被调用.method在html中调用跟data中数据的调用基本一样，不同的是medthod调用必须带”（）“。

栗子：

<div class="app">
    {{mfunc()}}
</div>
<script>
    var vue=new Vue({
        el:".app",
        data:{
            a:1,
            b:2
        },
        methods:{
            mfunc:function(){
                return this.a+this.b;
            }
        }
    })
</script>

4)监听属性 watch

   Vue提供了一种更统一的方式来观察和响应Vue实例上的数据变动：侦听属性。

当你有一些数据需要随着其它数据变动而变动时或者执行异步操作或开销较大操作时，建议使用watch。

 

1. 组件component

  组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。

注意组件的模板替换了自定义元素，自定义元素的作用只是作为一个挂载点。

为了让你体会模板语法的强大，在这里我举个小栗子：你们先体会一下

<div id="app">
   <my-compinent></my-compinent>
</div>
<script>
    Vue.component('my-compinent',{
        template:'<p>' +
        '{{name}} :陌生人，我也为你祝福！' +
        '<button @click="changeName">改名</button></p>',
        data:function(){
             return{
                 name:"海子"
             }
        },
        methods:{
            changeName:function(){
                this.name="yezi"
            }
        }
    })
    new Vue({
        el:"#app"
    })
</script>

结果：

 

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

 

 

全局组件：

 //注册
Vue.component('tc',{
     template:'<h1>自定义组件</h1>'
 })
 //创建实例
 new Vue({
     el:".block",
     data:{}
 })

局部组件：不需要全局注册每个组件。可以让组件只能用在其它组件内，用实例选项 components 注册：

var child={
     template:'<h2>hello</h2>'
 }
 new Vue({
     el:".app",
     components:{
         //<tc>将只在父模板中可用
         'tc':child
     }
 })

 

Props:使用 Props 传递数据

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

"prop" 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props选项

栗子：

<div id="app">
        <child message="hello"></child>//向它传入一个普通字符串
    </div>
<script>
     Vue.component('child',{
     //声明props
     props:['message'],
     template:'<span>{{message}}</span>'
     })
     new Vue({
     el:"#app"
     })
</script>

camelCase (驼峰命名)vs. kebab-case

HTML 特性不区分大小写。名字形式为 camelCase 的 prop 用作特性时，需要转为 kebab-case（短横线隔开）：

Vue.component('child', {

  // camelCase in JavaScript

  props: ['myMessage'],

  template: '<span>{{ myMessage }}</span>'

})

<!-- kebab-case in HTML --><child my-message="hello!"></child>

 

1. 过滤器

Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值：

过滤器串联： {{message|filterA|filterB}}
接受参数： {{message|filterA('arg1','arg2')}} 

参数传递给第二个和第三个 因为第一个是数据本身过滤器处理简单文本转换，复杂应用计算属性

全局方法 ：

Vue.filter("upabc",function(value){
    var c=value.toUpperCase();
    return c;
   });

<span>{{cup|upabc}}</span>

局部方法：写在Vue实例中

<div id="app">
{{str|upcase}}
</div>
<script>
    var cpp=new Vue({
        el:"#app",
        data:{
         str:[1,2,3,4,5,6,7]
        },
        filters:{
            upcase:function(value){
                b=value.join("|");
                return b;
            }
        }
    })
</script>