Vue.js学习笔记

Vue.js 模板语法

1. 文本：{{}}

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值。

div id="app">
  <p>{{ message }}</p>
</div>

关键代码：文本 {{}}

2. html： v-html

使用 v-html 指令用于输出 html 代码。

html :

<div id="app">
    <p v-html="message"></p>
</div>

javascript :

    new Vue({
        el: '#app',
        data: {
            message: '<h1>hello,vue.js!</h1>'
        }
    })  

关键代码： v-html 以及 {{}}

3. 属性： v-bind

HTML 属性中的值应使用 v-bind 指令。

html :

<div id="app2">
    <label for="r1">修改颜色</label><input type="checkbox" v-model="class1"  id="r1" />
    <br />
    <div v-bind:class="{'class1': class1}">
        【验证v-bind的用法】这里和class1 的属性进行了绑定。会随着class1的改变而改变。
    </div>
</div>

css :

<style type="text/css">
    .class1{
        background: #440;
        color: #ee0;
    }
</style>

javascript :

new Vue({
    el:'#app2',
    data: { class1: false }
});

4. 表达式

Vue.js 都提供了完全的 JavaScript 表达式支持。

html :

<div id="app3">
    {{5+5}}<br />
    {{ok ? 'YES' : 'NO'}} <br />
    {{ message.split('').reverse().join('')}} <br />
    <div v-bind:id="'list-' + id">叶莜落</div>
</div>

javascript :

new Vue({
    el:'#app3',
    data: {
        ok: true,
        message: 'ye you luo',
        id: 1
    }
});

5. 指令

指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

html :

<div id="app4">
    <p v-if="seen">现在你看到我了</p>
</div>

javascript :

new Vue({
    el: '#app4',
    data: {
        seen: true
    }
});

在上面的示例中，如果在JavaScript中将seen的值置为 false，则该DOM不会在浏览器中加载。

6.参数

参数在指令后以冒号指明。
例如， v-bind 指令被用来响应地更新 HTML 属性。
v-on 指令用于监听 DOM 事件。

html :

<div id="app5">
    <p><a v-bind:href="url">博客园</a></p>
    <p v-on:click="dosomething">绑定了点击事件</p>
</div>

javascript :

new Vue({
    el: '#app5',
    data: {
        url: 'http://www.cnblogs.com/helloIT'
    },
    methods:{
        dosomething: function(){
            alert('hello,Vue.js!')
        }
    }
});

7.修饰符

8.用户输入: v-model

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

<div id="app6">
    <p>输入的字符串： {{message6}}</p>
    <input v-model="message6" />
</div>

<div id="app7">
    <p>{{message7}}</p>
    <button v-on:click="reverseMessage">{{message7_1}}</button>
</div>

javascript :

new Vue({
    el: "#	app6",
    data: {
        message6: '叶莜落'
    }
});

new Vue({
    el: "#app7",
    data: {
        message7: '叶莜落',
        message7_1: '点击翻转'
    },
    methods: {
        reverseMessage:function(){
            this.message7 = this.message7.split('').reverse().join('')
        }
    }
});

9.过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

html :

<div id="app8">
	使用过滤器让首字母大写： {{message8 | capitalize}}
</div>

javascript :

new Vue({
    el: '#app8',
    data: {
        message8: 'yeyouluo',
    },
    filters: {
        capitalize: function(value){
            if( !value ) {
                return '';
            }
            vlue = value.toString();
            return value.charAt(0).toUpperCase() + value.slice(1);
        }
    }
});

注意：
①过滤器可以像管道一样串联。
②过滤器是JavaScript函数，因此可以接受参数。
{{ message | filterA('arg1', arg2) }
这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

10.缩写

Vue.js为两个最常用的指令提供了特别的缩写：

10.1 v-bind

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

10.2 v-on

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

Vue.js 条件语句

1.v-if

使用场景：
①html元素
②template
注：还可以使用在字符串模板引擎中，如Handlebars。

html ：

<div id="app1">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
        <h1>叶莜落</h1>
        <p>技术改变世界</p>
        <p>梦想引领技术</p>
    </template>
</div>

javascript :

<script>
    new Vue({
        el: '#app1',
        data: {
            seen:true,
            ok:true
        }
    })
</script>

2.v-else

html :

<div id="app1">
    <p v-if="seen">现在你看到我了</p>
    <div v-else>seen对应的内容没有显示</div>
    <p v-if="seen">哈哈哈</p>

    <template v-if="ok">
        <h1>叶莜落</h1>
        <p>技术改变世界</p>
        <p>梦想引领技术</p>
    </template>
    <template v-else>模板中的内容没有显示</template>
    <p v-if="seen">嘻嘻嘻</p>
</div>

javascript :

<script>
    new Vue({
        el: '#app1',
        data: {
            seen:false,
            ok:false
        }
    })
</script>

结果：
seen对应的内容没有显示
模板中的内容没有显示

总结：
①对块状元素而言，v-else对应else块。只要v-if对应的值相同，则无论多个v-if如何分散，都对应一个v-else。
②对template而言，v-else只能放在template中。

3.v-else-if

html :

<div id="app2">
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>
</div>

javascript :

new Vue({
    el: '#app2',
    data: {
        type: 'D'
    }
})

总结：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

4.v-show

可以使用 v-show 指令来根据条件展示元素，达到v-if的效果。

html :

<div id="app3">
    <h1 v-show="ok2">Hello!</h1>
</div>

javascript :

new Vue({
    el: "#app3",
    data: {
        ok2: true
    }
})

Vue.js 循环语句

循环语句使用v-for。
使用场景：
①html列表元素
②模板

1.单纯的html列表元素示例
html :

<div id="app1">
    <ol>
        <li v-for="site in sites">{{site.name}}</li>
        <li>---------</li>
    </ol>
</div>

javascript :

new Vue({
    el:'#app1',
    data: {
        sites: [
            {name:'yeyouluo1'},
            {name:'yeyouluo2'},
            {name:'yeyouluo3'}
        ]
    }
})

结果：

2.模板示例
html :

<div id="app2">
    <ul>
        <template v-for="book in books">
            <li>{{book.name}}</li>
            <li>--------</li>
        </template>
    </ul>
</div>

javascript :

new Vue({
    el:'#app2',
    data: {
        books:[
            {name: '《飘》'},
            {name: '《悲惨世界》'},
            {name: '《呐喊》'}
        ]
    }
})

结果：

3.v-for迭代对象

v-for 可以通过一个对象的属性来迭代数据。

3.1 迭代对象默认第一个参数为value
html :

<div id="app3">
    <ul>
        <li v-for="o in object">{{o}}</li>
    </ul>
</div>

javascript :

new Vue({
    el:'#app3',
    data: {
        object: {
            name: '百度',
            url: 'https://www.baidu.com',
            slogan:'百度一下，你就知道'
        }
    }
})

结果 :

思考：如何实现一个对象数组的迭代？

3.2 迭代对象默认第二个参数为key，默认第三个参数为index
html :

<div id="app3">
    <ul>
        <li v-for="o in object">{{o}}</li>
    </ul>
    <ul>
        <li v-for="(value,key) in object">{{key}} : {{value}}</li>
    </ul>
    <ul>
        <li v-for="(value,key,index) in object">{{index}} . {{key}} : {{value}}</li>
    </ul>
</div>

javascript :

new Vue({
    el:'#app3',
    data: {
        object: {
            name: '百度',
            url: 'https://www.baidu.com',
            slogan:'百度一下，你就知道'
        }
    }
})

结果：

4.v-for 迭代整数
html :

<div id="app4">
    <ul>
        <li v-for="n in 10">{{ n }}</li>
    </ul>
</div>

javascript :

new Vue({
    el:'#app4'
})

结果：

Vue.js 计算属性

Vue.js 计算属性是在Vue()构造函数中使用computed属性。

html :

<div id="app1">
    <p>原始字符串：{{ message }}</p>
    <p>计算后反转字符串：{{ reversedMessage }}</p>
</div>

javascript :

<script type="text/javascript">
    var vm = new Vue({
        el: '#app1',
        data: {
            message: 'yeyouluo!'
        },
        computed: {
            reversedMessage:function(){
                 // `this` 指向 vm 实例
                return this.message.split('').reverse().join('');
            }
        }
    })
</script>

结果：
原始字符串：yeyouluo!
计算后反转字符串：!ouluoyey

①实例 中声明了一个计算属性 reversedMessage 。
②提供的函数将用作属性 vm.reversedMessage 的 getter 。computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter 。具体可参考《菜鸟学习》
③vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

附：computed vs methods

相同点：效果一样。
区别：
①computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
②使用 computed 性能会更好，但是如果不希望缓存，可以使用 methods 属性。

Vue.js 样式绑定

1.1 切换多个class

可以用 v-bind 来设置样式属性。
可以在对象中传入更多属性用来动态切换多个 class 。

html :

<div id="app1">
    <div v-bind:class="{active:isActive,'text-danger':hasError}"></div>
</div>

css :

<style>
    .active{
        100px;
        height: 100px;
        background-color: green;
    }

    .text-danger{
        background: red;
    }
</style>

javascript :

<script>
    new Vue({
        el:'#app1',
        data:{
            isActive: true,
            hasError:true
        }
    })
</script>

示例中css结果会叠加。

1.2 class绑定Object

可以直接绑定数据里的一个对象。

html :

<div id="app2">
    <div v-bind:class="classObject"></div>
</div>

css同上。
javascript :

new Vue({
    el: '#app2',
    data: {
        classObject:{
            active:true,
            'text-danger':true
        }
    }
})

1.3 class绑定计算属性

可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式。

html :

<div id="app3">
    <div v-bind:class="classObject1"></div>
</div>

css同上。
javascript :

new Vue({
    el: '#app3',
    data:{
        isActive:true,
        error:null
    },
    computed:{
        classObject1:function(){
            return {
                active: this.isActive && !this.error,
                'text-danger':this.error && this.error.type === 'fatal'
            }
        }
    }
});

1.4 数组语法

html :

<div id="app4">
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>

css同上。
javascript :

new Vue({
    el:'#app4',
    data:{
        activeClass: 'active',
        errorClass: 'text-danger'
    }
})

1.5 三元表达式切换class

可以使用三元表达式来切换列表中的 class。

html :

<div id="app5">
    <div v-bind:class="[errorClass, isActive?activeClass:'']"></div>
</div>

css同上。
javascript :

new Vue({
    el:'#app5',
    data: {
        isActive:true,
        activeClass: 'active',
        errorClass: 'text-danger'
    }
})

2.1 内联样式

html :

<div id="app6">
    <div v-bind:style="{color:activeColor, fontSize:fontSize + 'px'}">叶莜落</div>
</div>

javascript :

new Vue({
    el:'#app6',
    data:{
        activeColor:'green',
        fontSize:30
    }
})

2.2 内联样式：绑定到对象

可以直接绑定到一个样式对象，让模板更清晰。

html :

<div id="app7">
    <div v-bind:style="styleObject">叶莜落</div>
</div>

javascript :

new Vue({
    el:'#app7',
    data: {
        styleObject:{
            color:'green',
            fontSize:'30px'
        }
    }
})

2.3 内联样式：绑定多个对象

html :

<div id="app8">
    <div v-bind:style="[baseStyles,overridingStyles]">叶莜落</div>
</div>

javascript :

new Vue({
    el:'#app8',
    data:{
        baseStyles:{
            color:'red',
            fontSize:'30px'
        },
        overridingStyles:{
            fontWeight:'bold'
        }
    }
})

注： fontWeight == 'font-weight'

Vue.js 事件处理器

1. 事件监听可以使用v-on指令来绑定

html :

<!--
    作者：叶莜落
    时间：2017-10-18
    描述：事件监听可以使用 v-on 指令
-->
<div id="app1">
    <button v-on:click="counter += 1">增加1</button>
    <p>这个按钮被点击了{{ counter }} 次。</p>
</div>

JavaScript :

var app1 = new Vue({
    el: '#app1',
    data: {
        counter: 0
    }
});

2. v-on 可以接收一个定义的方法来调用JavaScript方法

html :

<!--
    作者：叶莜落
    时间：2017-10-18
    描述：v-on 可以接收一个定义的方法来调用JavaScript方法
-->
<div id="app2">
    <button v-on:click="greet">Greet</button>
</div>

JavaScript :

var app2 = new Vue({
    el: '#app2',
    data: {
        name: 'Vue.js'
    },
    methods: {
        greet: function(event) {
            alert( 'Hello,'+ this.name + '!' );
            if( event ) {
                alert( event.target.tagName )
            }
        }
    }
})

3. 内联JavaScript语句

html :

<!--
    作者：叶莜落
    时间：2017-10-18
    描述：内联JavaScript语句
-->
<div id="app3">
    <button v-on:click="say('Hi')">Say Hi</button>
    <button v-on:click="say('TKS')">Say TKS</button>
</div>

JavaScript :

var app3 = new Vue({
    el: '#app3',
    methods: {
        say: function( message ) {
            alert(message)
        }
    }
})

Vue.js 表单

1.text/textarea

html :

<!--
    作者：叶莜落
    时间：2017-10-18
    描述：用v-model绑定数据--普通表单元素text/textarea
-->
<div id="app1">
    <p>input 元素</p>
    <input type="text" v-model="message" placeholder="编辑我……"/>
    <p>消息是：{{message}}</p>

    <p>textarea元素：</p>
    <p style="white-space: pre">{{message2}}</p>
    <textarea cols="30" rows="10" v-model="message2" placeholder="多行文本输入……"></textarea>
</div>

javascript :

var app1 = new Vue({
    el: '#app1',
    data: {
        message: '叶莜落',
        message2: 'https://yeyouluo.github.io'
    }
})

2.复选框

html :

<div id="app2">
    <p>单个复选框：</p>
    <input type="checkbox" id="checkbox" v-model="checked"/>
    <label for="checkbox">{{checked}}</label>

    <p>多个复选框：</p>
    <input type="checkbox" id="google" value="google" v-model="checkedNames"/>
    <label for="google">google</label>
    <input type="checkbox" id="baidu" value="baidu" v-model="checkedNames"/>
    <label for="baidu">baidu</label>
    <input type="checkbox" id="sogo" value="sogo" v-model="checkedNames"/>
    <label for="sogo">sogo</label>
    <br />
    <p>选择的值为：{{checkedNames}}</p>
</div>

javascript :

var app2 = new Vue({
    el: '#app2',
    data: {
        checked: true,
        checkedNames: []
    }
})

3.单选框

html :

<div id="app3">
    <input type="radio" id="baidu" value="baidu" v-model="picked"/>
    <label for="baidu">百度</label>
    <br />
    <input type="radio" id="google" value="google" v-model="picked"/>
    <label for="google">谷歌</label>
    <br />
    <p>选中值为：{{picked}}</p>
</div>

javascript :

var app3 = new Vue({
    el: '#app3',
    data: {
        picked: 'google'
    }
})

4.下拉列表

html :

<div id="app4">
    <select name="fruit" v-model="selected">
        <option value="">选择一个网站</option>
        <option value="www.baidu.com">Baidu</option>
        <option value="www.google.com">Google</option>
    </select>

    <div id="output">选择的网站是：{{ selected }}</div>
</div>

javascript :

var app4 = new Vue({
    el: '#app4',
    data: {
        selected: ''
    }
})

Vue.js 组件：自定义html 和 事件

组件可以扩展 HTML 元素，封装可重用的代码。

注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>

1. 全局组件

所有实例都能用全局组件。

html :

<div id="app1">
    <yeyouluo></yeyouluo>
</div>

javascript :

//注册
Vue.component('yeyouluo',{
    template: '<h1>自定义全局组件！</h1>'
})
// 根实例
var app1 = new Vue({
    el: '#app1'
})

总结 ：
①使用Vue.component注册
②使用<tagName></tagName>调用

2. 局部组件

在实例选项中注册局部组件，组件只能在这个实例中使用。

html :

<div id="app2">
    <github></github>
</div>

javascript :

var child = {
    template: '<h1>自定义局部组件：https://yeyouluo.github.io</h1>'
}

var app2 = new Vue({
    el: '#app2',
    components: {
        // <github> 将只在父模板可用
        github: child   
    }
})

总结 ：
①注册局部组件就是定义了一个变量。
②在Vue实例components属性中绑定tagName和上面定义的变量。

Vue.js 自定义指令

Vue.js 路由