vue基础

vue是渐进式的框架，什么叫渐进式？
循环渐进的一个过程，可以当成库来使用，也可以当成框架来进行项目的构建

框架和库的区别
框架可以完成一整个大型应用的开发
库：提供便利，完成某些功能

vue和jquery的区别
jquery是操作dom，jQuery效率偏低
vue思想形成虚拟的dom树（JavaScript对象），通过diff算法，如果发生改变，构建真实的dom，没有改变，就不去管
vue关注的是虚拟dom，就是关注数据层即可

VUE内容

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

插值表达式 {{ }}

1.可以放字符串
{{"hello world"}}

2.number类型
{{123}}

3.boolean类型
{{true}}

4.array
{{ [1,2,3] }}

5.object 前后空格不能省略
{{ [1,2,3] }}

6.简单的运算 1+1 "a"+"b"
{{ 1+1 }}

7.三元表达式 true?"abc":"xyz"
{{ true?"abc":"xyz" }}

8.undefined 和null 在插值表达式中不会显示
{{ true }}显示
{{ undefined }}
{{ null }}

vm其他的属性
vm.$el 需要渲染的模板
el : "#app"

vm.$nextTick 渲染完成以后执行
vm.$nextTick(function(){
console.log("渲染完成")
})

vm.$mount 等同于实例中的el属性

指令：
在vue中，内置指令是以v-开头的
1.v-pre : 阻止当前vue对当前元素的所有内容进行渲染进行渲染
首先页面自己进行渲染，vue接管以后会对vue的模板部分重新渲染
2.v-cloak 可以配合css将没有渲染的vue模板进行隐藏
3.v-once 只能让vue进行一次渲染
4.v-html 容易被攻击
5.v-text
6.v-if
7.v-else-if
8.v-else
v-if v-else-if v-else 跟JavaScript语法相同，一组里面不能有第三者插足，保证连续性
9.v-show
v-if和v-show的区别
1.v-if是控制元素是否存在，如果为false则完全移除该元素，v-show是控制元素的display属性
2.v-if可以支持模板的，v-show是不行的

v-bind 绑定属性 简写直接写成一个:
v-on 事件绑定 简写成一个@

代码解析
引入vue之后
body中输入
<div id="app">
这里可以直接引入实例中的数据data
{{ name }}
{{ arr }}
{{ obj }}
指令
<div v-pre>
<div>{{ "abc" }}</div>
</div>
阻止渲染，页面中显示{{ "abc" }}，去掉阻止则显示abc

<div v-cloak>{{ abc }}</div>
在style里面设置[v-cloak]{display: none;}之后
如果没有abc这个模块则不进行渲染，直接隐藏

<div v-if="flag">
<div>world123</div>
</div>
<div v-else>
<div>world456</div>
</div>
flag为false，所以页面只显示world456

<div v-show="flag">
<div>world789</div>
</div>
v-show控制display属性，所以不显示

<img v-bind:src="src" alt="">
在页面中加入图片，绑定图片的属性，简写如下
<img :src="src" alt="">

<button v-on:click="fun">click01</button>
绑定单击事件，简写如下
<button @click="fun">click</button>

</div>
然后再script中创建一个vue实例，对需要渲染的模板进行渲染
var vm = new Vue({
el: "#app",也可以使用vm.$mount = "#app"进行渲染
data : { data是数据
name : "psh",
arr : [1,2,3,4],
flag : false,
obj : {
a : 1,
b : 2
}，
src : ‘http........jpg’
}，
methods：{专门存放事件
fun（）{
console.log（123）
}
}
})

渲染完成后
vm.$nextTick(function(){
console.log("渲染完成")
})