欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue.js学习笔记

程序员文章站 2024-03-17 11:02:40
...

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{
        width: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 路由

上一篇: Vue.js 学习笔记

下一篇: