Vue2----安装与使用常用指令

目录

• Vue2的安装
• Vue2的语法
• 常用指令

Vue2

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

官网:https://cn.vuejs.org/

语法

app不能挂载到body,html上
el 元素挂载位置
data 模型数据,可多个
{{}} 插值表达式(有运算功能)
vue执行原理??
vue----框架—原生js代码
模板V—VM框架《—数据M (MVVM)

var vm=new Vue({

})

安装

下载地址:https://cn.vuejs.org/v2/guide/installation.html

选择—>开发版本(包含完整的警告和调试模式)
或者直接引用

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

常用指令

官方文档：https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4

var vm=new Vue({
        el: '#app',
        data:{
            msg: '你好<u>碰磕</u>',
            age: 20,
            items:[
                {
                "text":'第一个值',
                },
                {
                "text":'第二个值',
                }
            ],
            dj:()=>{
                alert("v-on")
            },
            img:'./img/chunyu03.png'
        }
    })

以下标签均在id为app的标签内

v-text

直接赋值文本内容

<h2 v-text="msg">旧数据</h2>

v-html

赋值html内容

<h3 v-html="msg">旧HTML</h3>

v-show

条件判断决定是否显示

<h4 v-show="1==1">v-show指令</h4>

v-if v-else-if v-else

条件判断执行代码块

	<h1 v-if="age==10">age=10</h1>
    <h2 v-else-if="age==20">age=20</h2>
    <h3 v-else>age不等于10也不等于20</h3>

v-for

语法 属性名 in 变量名
基于源数据多次渲染元素或模板块

<div v-for="item in items">
            {{item.text}}
        </div>

v-on

绑定事件监听器
可用@缩写

<div v-on:click="dj">
            点击我触发事件
        </div>

v-bind

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式
缩写:

<img v-bind:src="img" />

v-model

双向数据绑定

v-pre

跳过这个元素和它的子元素的编译过程

<h3 v-pre>{{msg}}</h3>

v-cloak

这个指令保持在元素上直到关联实例结束编译。
解决闪屏问题

        [v-cloak]{
            display: none;
        }

<h3 v-cloak>{{msg}}</h3>

v-once

只渲染元素和组件一次。

<div id="app" v-once>
<h2 v-text="msg">旧数据</h2>
</div>

Vue2的安装以及常用指令的测试就🆗了,可以随时查阅相关指令的作用~