初学Vue（用于自己学习，记录）

调用Vue框架的写法
Vue.createApp({
data(){
        return {
                name:"hello"，
                isShow:true，
                List:["aaa","bbb","ccc"]，
                mytext:""
                }
},
methods:{
        handleclick(){},
}
}).mount("id名")

一、文本插值
语法：{{文本内容}}，        是“Mustache"语法(即双大括号)
文本内容可以是一段给定的内容、一个变量或者是表达式（变量name/三目表达式等等），
但是不支持语句（eg：let a=1;）
二、指令（可以是变量或者是表达式）
1、绑定属性
v-bind:   属性（eg：<div v-bind:class="color"></div>）
通过变量color来改变class的状态，color可以是css的选择器名字
v-bind:  = :    (eg:  <div :class="color"></div>)
同时绑定一个标签的多个属性可以写成<img v-bind="obj(一个对象)" />
然后在这个对象中写属性
let obj={
width:200，
src:图片地址路径
}
2、绑定事件
<button v-on:click="handleClick()"></button>
v-on: = @
可简写为<button @click="handleClick()"></button>
3、条件渲染
v-show="isShow"        根据isShow来判断该元素是否显示隐藏
v-if="isShow"        根据isShow来判断该元素是否创建删除
(v-if、v-else-if、v-else)
eg:<template v-if="isShow">
        <div>111</div>
        <div>222</div>
</template>
可以将满足条件的标签一起显示出来，并且template这个标签不会出现在页面中
4、列表渲染
v-for="（item(元素内容)，index(索引值)） in List"       根据List的Length来渲染相应数量的  li
定义的变量最好用括号括起来，变量也可以使用解构赋值的方式来代表 。
in可以用of来替换
eg:<ul>
        <li  v-for="item in List">{{item}}</li>
     </ul>
5、双向绑定v-model
eg:<input type="text" v-model="mytext"><button @click="add">add</button>
在input框中输入文本，mytext这个变量的值会跟着改变
改变mytext这个变量的值，input中的文本也会相应改变
6、v-html模版
eg:<div  v-html="<b>aaa</b>"></div>
只会把aaa识别到页面上，而<b></b>将被识别为标签。而不会像{{<b>aaa</b>}}将值全都当做文本识别到页面上
但这样很危险，容易造成xss漏洞，所以在数据安全可靠时才使用，永远不要使用用户提供的html内容