Vue3实例化与常用的内置指令

Vue3实例化

<script>
	//创建一个app(application应用)
		const app = Vue.createApp({
			//定义数据 data
			data(){
				//返回msg
				return {msg:"你好vue"}
			}
		})
	   //把app实列挂载到app节点
	var vm = app.mount("#app")
</script>

内置指令

内置指令 v-开头的特殊属性  用于html与javascript数据模型

文本渲染

        1.v-text

                是指将实例化出来的文本渲染到页面类似于js的innerText()

        2.v-html

                与v-text差不多，但是v-text无法输出标签与js中的innerHTML()类似

        3.{{}}

                对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持也就是说里面还可以填写js但是只能一行不能换行

        4.v-bind:属性名="属性值"

                用来给标签添加属性可以简写为  :属性名="值"

         5.v-if与v-show

                v-if与v-show都是用来隐藏元素的

                区别在于v-if隐藏的方法是直接删除节点  如果需要频繁显示隐藏不建议使用

                v-show隐藏的方式使用css方式

        6.v-for

                用于遍历

                v-if="(item,index) in list" :key = "item"   item  变量的当前数据  index 当前的下标

               key是给vue遍历的节点一个唯一的标识符，更好的让vue去做排序过滤等操作，为了性能的优化，要求在一个for指令里面key的值要唯一

                范围  v-for = “item in 5”

  如果v-for  与  v-if  想同时用需要用template

<template v-for="item in 10">
	<p v-if="item%2==0">{{item}}</p>
</template>

         7.  v-on   事件

                v-on：click点击事件  可见写为  @click