vue入门

Vue的特点

结合了angular的指令与react的组件 虚拟dom操作

是渐进式javascript框架

Vue的优点

中文文档完整

生态丰富 （插件多）

上手简单

指令 组件 虚拟dom

关于vue导入和实例化

//模板
<div id="app">
        <h1>{{msg}}</h1>
    </div>
//引入
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
//实例化
<script>
    new Vue({
        el: "#app",//指定模板返回 （element）
        data: {
            msg: "你好vue"
        },//指定数据
    })
        //el msg 都是固定写法
</script>

 Vue的文本与指令

 

//Vue可以渲染实例的值
v-text='msg'

//数学运算
v-text='2+3'

//js表达式 只能运行单行js 
v-text='msg-length'

//如果是文本需要加单引号
v-text='"我在中国，"+msg'
指令是联系模板与vue实例的桥梁

指令

指令 是带有 v- 前缀的特殊 attribute。指令 的属性值预期是单个 JavaScript 表达式

文本渲染指令

1、{{}}

//{{}} 文本渲染指令

//01 渲染vue的数据

//02 数学运算

// 执行js的普通方法split分割，reverse反转数组，join连接数据转为字符串

//04 三元运算（不能使用if，for等多行命令）

2、v-text

3、v-html

条件渲染指令

v-if

v-else

v-else-if

v-show 隐藏元素以css的方式

频繁切换用v-show 少量切换用v-if

vue实例

var vm=new Vue({...})

vm就是new Vue创建的实例