Vue基础笔记(一)

October 25, 2019

350views

3370字数

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

<div id="app">
{{msg}}
</div>

声明Vue对象
引入了vue.js，Vue会被注册为一个全局变量。在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

new Vue({
    el: "#app",
    data: {
        msg: "helloWorld,helloVue!"
    }
})

el:Vue需要操作的元素节点
data属性:每个 Vue 实例都会代理其 data对象里所有的属性。注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $；
现在数据和 DOM 已经被绑定在一起，所有的元素都是响应式的。在浏览器控制台修改app.msg,页面会相应更新。
Vue常用指令介绍
指令带有前缀 v-，表示它就是vue的属性
1、v-text (更新元素的文本内容)

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

2、v-html (更新元素的innerHTML)
注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。

<div v-html="html"></div>

3、v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用
4、v-bind(动态地绑定一个或多个特性)
有缩写，缩写是一个冒号　 :

 <div id="app">
    <img :src="pic">
</div>
new Vue({
        el:"#app",
        data:{
            pic:"img/消息.png"
        }
    })

5、v-on
就是监听 DOM 事件来触发一些 JavaScript 代码。
表达式可以是一个方法的名字或一个内联语句，这个内联跟样式的内联一样，就是直接在DOM元素上写逻辑，如下：

<button type="button" v-on:click = "num += 1">点击增加1</button>

这个也是有缩写的缩写就是@

<button @click="show(1)">点我啊</button>

在 methods 对象中定义方法

 new Vue({
        el:"#app",
        data:{

        },
        methods:{
            show(a){
                alert("你好啊小朋友"+a);
            }
        }
    })

6、v-if (通过真假值的判断对dom元素进行渲染)

 <a @click="flag = true">新闻</a>
    <a @click="flag = false">电影</a>
    <hr>
    <div v-if="flag">
        <h1>新闻</h1>
    </div>
    <div v-else>
        <h1>电影</h1>
    </div>

当然，有if肯定就有else
查了一下官方的文档，v-if和v-show的区别：
v-if：是真实的条件渲染，切换时销毁和重建，第一次如果判断条件为假，是什么都不做的，官方称为懒惰性。
v-show：元素始终被编译并保留，只是简单地基于 CSS 切换
总结一下， v-if有更高的切换消耗而 v-show有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show较好，如果在运行时条件不大可能改变则使用 v-if较好。

7、v-for

也就是遍历数组里面的所有元素，和js中的foreach、jQ中的each差不多

{{t}}:{{h}}

        </li>
     </ul>
    new Vue({
        el:"#app",
        data:{
            user:[
                {
                    name:"老王",
                    hobby:["吃饭","睡觉"]
                },
                {
                    name:"小王",
                    hobby:["唱","跳"]
                }
            ]
        }
    })

v-for,可以遍历数组，对象，甚至是整数（可以当做循环的次数来用），其中遍历的参数可以是value，index，如果是对象还有key。
8、v-model(表单元素的双向绑定)

div id="app">
    <h1>用户注册</h1>
    用户名:<input type="text" v-model="form.username">
    密码：<input type="password" v-model="form.pwd">
    <hr>
    <button @click="show()">点我啊</button>
    {{form}}
</div>
new Vue({
        el:"#app",
        data:{
            form:{
                username:"",
                pwd:""
            }
        },

基本指令就写到这。