木子屋
 

标题: Vue入门学习笔记

作者: dnawo

日期: 2022-03-20 11:08 PM

分类: 脚本语言

内容:
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/

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.629 ms

标题: Vue入门学习笔记

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.629 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.629 ms