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差不多

  • <h1> {{i}}:{{u.name}} </h1>
      <h2>爱好</h2>
    • {{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:""
                }
            },

    基本指令就写到这。

Last modification:October 25th, 2019 at 08:19 am
来杯coffee吧