v-model='' 双向绑定，用于表单元素
v-on:事件名='函数名 绑定一个事件，简写@click=''
v-bing:属性名='' 绑定一个属性，简写 ：属性名='值'
v-show='' 控制元素的显示或隐藏 dsiplay：none
v-if='' 控制元素的显示或隐藏 visibility:hidden
v-else
v-else-if
&&与 ，有假与为假
|| 或 ，有真或为真
！ 非 ，取反
if（条件）{
//1
}else{
//2
}
if(条件1){
//1
}else if(条件2){
//2
}else 你发（条件3）{
//3
}else{
}
var num=123.456；
console.log（num.toFixed(2)）；四舍五入
console.log(Math.random()*1000.toFixed(0))
<html>
<head>
<title>Document</title>
</head>
<body>
{{allStr}}</h1>
查看计算属性里面的随机数</button>
</div>
./vue2.6.14.js"></script>
<script>
/* 你要写一个方法，里面需要传一些参数
明确写出你的参数的实际内容和传入的参数的类型
*/
/**
* 1、name 用户的姓名 type: String
* 2、age 用户的年龄 type：Number
* 3、arr 用户的数据 type：Array
**/
/* function aa(name,age,arr){ */
/* 根据传入的参数写的相关的业务逻辑 */
/* } */
let vm = new Vue({
el: "#app",
data: {
str1: "姓名：",
str2: "张三",
str3: "年纪：",
str4: "年芳20",
value:1
},
/* 计算属性 */
/* 就是用来处理data中的数据，
把数据处理好了，方便给你使用 */
/* 缓存 利于性能优化 避免重复获取数据 */
/* 当data中的数据发生变化的时候computed中的值才会发生改变 */
computed: {
allStr(){
return this.str1 + this.str2 + this.str3 + this.str4
},
r(){
return Math.random() + this.value
}
},
methods: {
fn() {
console.log(this.r)
}
}
})
</script>
</body>
</html>
5.1 基本指令5.1.1 v-cloak一般与display：none进行结合使用
作用：解决初始化慢导致页面闪动的最佳实践
5.1.2 v-once
定义它的元素和组件只渲染一次
5.2 条件渲染指令
5.2.1 v-if, v-eles-if ,v-else
用法： 必须跟着屁股走
v-if后面的等号必须是布尔值
v-if的弊端 :
Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因此会出现乌龙
只会渲染变化的元素，也就是说，input元素被复用了
