Vue基础

Vue需要会的单词：

bind 绑定

property 属性

createApp 创建App

mount 挂载

Vue特点：

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

渐进式javascript框架

Vue优点：

中文文档完毕

生态丰富（插件多）

上手简单

指令，组件，虚拟dom

导入实例化

模板：

    <div id="app">
        <h1>{{msg}}</h1>
        <input type="text" v-model="msg">//指令
    </div>

实例化：

实例化：
				new Vue({
            el: "#app",//指定模板返回
            data: {
                msg: "你好Vue!"
            },//指定数据
        })
        //el与data都是固定的写法

Vue的数据通过指令与模板产生联系

v-if与v-show

1都是用来控制显示与隐藏

2v-if是通过dom操作实现隐藏，v-show通过css方式隐藏

3频繁切换用v-show反之v-if

隐藏元素以css的方式

频繁切换用v-show

少量切换用v-if

条件渲染指令：

v-if

v-else

v-else-if

v-show

v-for

可以对字符串，数字，列表，对象进行遍历

<li v-for="(a,index) in agg">{{index+1}}-{{a}}</li>

a 遍历的元素（自定义的名称）

index 遍历的下标

agg 遍历的数据

v-bind：key

值必须是唯一的，为了让Vue更好的渲染列表

文本渲染指令：

指令与模板：

特点：就是v开头的特殊属性，她的值预期为javascript单行表达式

可以渲染实例的值 v-text“msg”

数学运算v-text=“2+3”

使用js表达式v-text=“msg.length”

如果需要文本需要加单引号v-text“我在中国，+”

{{}}文本渲染指令

1 渲染Vue的数据

2 数学运算

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

4 三元运算符(不能使用if for等多行命令)

vue的实例

var vm = new Vue({//vm是Vue创建的一个实例
					el:'#app',
					data:{
						msg:'Vue真好学！'
					}
			})
			console.log(vm)

vm就是 new Vue创建的实例

v-text

v-html

v-html会解析html文本

innertext || innerhtml