VUE之渲染视图方法、基本元素及应用

1. 使用的数据，需要先在data中存在，数据存在才能实现数据绑定

2. 通过索引 arr[ i ] ，数组length改变数组，不能渲染视图
   数组变异方法 push、pop、shift、unshift、sort、reverse、splice

3. $set vm.$set(vm.obj, 'xxx', 90) 改变对象 {} 数据 （对象名， 属性名， 新值）；

4. $el拿到页面元素vm.$el; vm.$el.innerText; vm.$el.innerHTML

5. $nextTick在下次DOM循环结束之后，执行； 例：vm.$nextTicck(()=>{console.log(vm.$el.innerText);}) 当元素重新赋值后vue是异步执行，js的console会在vue之前打印出来；

6. $mount挂载vm.$mount('#app')

7. v-pre : 不使用vue解析，原样输出； <div v-pre>{ {aaa}}</div> // { {aaa}}

8. v-cloak:避免内容未加载出来的时候以 ‘{ {}}’ 形式显示；<style>[v-cloak]{display:none;}</style> <div v-cloak>{ {'ppp'}}</div>

9. v-once:始终用第一次的值，不再动态更改

10. v-html === innerHTML data:{dom:'<div>jingjing</div>' <div v-html="dom"></div>}

11. v-text:插入内容，div中间的值会被插入的值替换掉；data:{name:'jingjing' <div v-text="name">aaa</div>}

12. v-if、v-else、v-else-if v-show:条件选择，为true 渲染，false 不渲染，v-show是控制 display:none 与 display:block；template在v-show上不支持

13. template:模板<template v-if="true">...</template> template 不会渲染到页面中，所以不能写v-for 的 :key 值；

14. v-bind 简写为冒号 : <img :src="imgUrl">

15. :class : 多个class 用数组或对象形式<img :src="imgUrl" :class="[classone, classtwo]">
<img :src="imgUrl" :class="[classone, classtwo, true && 'red' ]">
<img :src="imgUrl" :class="{classone:false, classtwo:true}">
<img :src="imgUrl" class="red" :class="{red:true}">
    详见vue动态绑定class的几种方式

16. :style： <div :style="{width:'100px', height:'100px', backgroundColor:color}"></div> data:{color:'red'}
<div :style="[styleone, styletwo]"> duv </div>

17. v-for： 数组：<div v-for="(item,index) in arr">{ {item}}</div>
    对象：<div v-for="(key,value) in obj">{ {key}}</div>
    数值：<div v-for="item in 8">{ {item}}</div>
    字符串：<div v-for="item in jingjing">{ {item}}</div>

18. ${index}_2 ：
    

19. vue 中 使用多个 input 要添加 key 值，否则不会切换input
    <input type="text" key="name" > <input type="text" key="age" >

20. v-model ： input、textarea、checkbox、
    <input type="text" v-model="inpval"><span>{ {inpval}}</span> data:{content:'jing'}
<textarea v-model="inpval"></textarea> <span>{ {inpval}}</span> data:{content:'jing'}
    多选：<label for="check01">check01</label><input type="checkbox" v-model="checked"> <span>{ {checked}}</span> data:{checked:'jing'}
<label for="check01">check01</label><input type="checkbox" v-model="checked" value="check01"> <label for="check02">check02</label> <input type="checkbox" v-model="checked" value="check02">{ {checked}} data:{checked:[]}
    单选： <label for="one">one</label> <input type="radio" id="one" value="one" v-model="picked" /> <label for="two">two</label> <input type="radio" id="two" value="two" v-model="picked" /> { {picked}} data:{picked:''}
    下拉框：<select v-model="selected"><option value="" disabled>请选择</option><option value="" >A</option><option value="" >B</option></select> { {selected}} data:{selected:''}
    下拉框多选：<select v-model="selected" multiple> ... data:{selected:[]}

21. 传值：

const vm = new Vue({
   
	el:'#app',
	data:{
   
		content:'内容'，
		title:'标题'
	},
	components