脚本语言 订阅所有【脚本语言】的日志

Vue入门学习笔记

编辑:dnawo 日期:2022-03-20

字体大小: 小 中 大

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

一、引入Vue

复制内容到剪贴板程序代码 程序代码
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://v2.cn.vuejs.org/js/vue.min.js"></script>

二、Vue实例创建

复制内容到剪贴板程序代码 程序代码
<script>
    var vm = new Vue({
        el: string, //实例的挂载目标
        data: Object,  //用户属性
        computed: {[key: string]: Function | {get: Function, set: Function}},  //用户属性，可设置只读、可读写
        methods: {[key: string]: Function},  //用户方法
        watch: {[key: string]: string | Function | Object | Array} //监听用户属性值变化
    })
</script>

Vue实例属性其实有两类，为了便于称呼，我想了两个名称：固有属性和用户属性，举个例子说明：

复制内容到剪贴板程序代码 程序代码
<script>
    var vm = new Vue({
        el: '#example',
        data: {
            name: '木子屋'
        }
    })
</script>

el和data是Vue实例固有的属性，需在名称前加$才能访问它们，例如vm.$el，vm.$data，我称为固有属性；name是用户添加的属性，可直接访问，例如vm.name，我称为用户属性。Vue实例方法也是一样的，有固有方法和用户方法，下边我都这么称呼它们。更多Vue实例属性和方法详见《Vue API文档》。

注意：Vue使用$前缀暴露自己的内置API，它还为固有属性保留_前缀，所以应该避免用户属性名称使用这两个字符开头。

三、Vue数据绑定

复制内容到剪贴板程序代码 程序代码
<div id="example">
    <a v-bind:href="url">{{name}}</a>
    <!-- v-bind缩写 -->
    <a :href="url">{{name}}</a>
</div>

<script>
    var vm = new Vue({
        el: '#example',
        data: {
            url: 'http://www.mzwu.com/',
            name: '木子屋'
        }
    })
</script>

HTML属性使用v-bind指令和用户属性绑定，文本使用Mustache语法(双大括号)和用户属性绑定，创建Vue实例时自动赋值，Vue最大的特性是当修改用户属性值时，HTML也能同步更新，我们不再和HTML直接交互了，例如：

复制内容到剪贴板程序代码 程序代码
vm.url = "http://example1.mzwu.com/";
vm.$data.url = "http://example2.mzwu.com/";

使用v-model指令实现双向绑定：

复制内容到剪贴板程序代码 程序代码
<div id="example">
    <p>{{message}}</p>
    <input v-model="message">
</div>

<script>
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

四、Vue语句

1.判断语句：

复制内容到剪贴板程序代码 程序代码
<div id="example">
    <a v-show="show">click me</a>
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else>Not A/B</div>
</div>

<script>
    var vm = new Vue({
        el: '#example',
        data: {
            show: false,
            type: 'C'
        }
    })
</script>

v-show指令和v-if指令效果基本一样，不同的是带有v-show指令的元素始终会被渲染并保留在DOM中，v-show只是简单地切换元素的CSS display属性。

2.循环语句：

复制内容到剪贴板程序代码 程序代码
<ul id="example">
    <li v-for="item in items" :key="item">
    {{item}}
    </li>
</ul>

<script>
    var vm = new Vue({
        el: '#example',
        data: {
            items: ['Foo', 'Bar']
        }
    })
</script>

五、Vue事件监听

复制内容到剪贴板程序代码 程序代码
<div id="example">
    <button v-on:click="todo">click me</button>
    <!-- v-bind缩写 -->
    <button @click="todo">click me</button>
</div>

<script>
    var vm = new Vue({
        el: '#example',
        methods: {
            todo: function(){alert('Hello Vue!');}
        }
    })
</script>

事件修饰符：

复制内容到剪贴板程序代码 程序代码
<!-- 事件修饰符 .stop,.prevent,.capture,.self,.once,.passive -->
<a v-on:click.prevent="doThis">click me</a>
<!-- 按键修饰符 .enter,.tab,.delete,.esc,.space,.up,.down,.left,.right -->
<input v-on:keyup.enter="todo">
<!-- 系统键修饰符v2.1+ .ctrl,.alt,.shift,.meta -->
<div v-on:click.ctrl="todo">click me</div>
<!-- 鼠标按钮修饰符v2.2+ .left,.right,.middle -->
<div v-on:mousedown.left="todo">click me</div>

参考资料

[1].Vue官网：https://cn.vuejs.org/
[2].Vue文档：https://cn.vuejs.org/v2/guide/
[3].Vue API：https://cn.vuejs.org/v2/api/

上一篇: 任意微信小程序二维码生成获取方法图解
下一篇: Vue框架data和computed两种属性的区别
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 1621
发表评论
请登录后再发表评论！