Vue3新手入门必看之内置指令

一、安装vue

1.直接引用script

<script src="https://unpkg.com/vue@next"></script>

或者安装脚手架

npm install -g @vue/cli

2.创建应用实例

<script>
        const app =Vue.createApp({
   
            data(){
   
                return {
   msg:"你好vue"}
            }
        })

        var  vm=app.mount("#app")
    </script>

二、模板语法-文本渲染

1.v-text

<div id="app">
			<p v-text="msg"></p>
			
		</div>
		<!-- 把app里面的内容称之为模板 -->
		<!-- v-开头的属性称之为模板的指令 -->
		<!-- 通过指令吧html模板和js联系在一起 -->
		<script type="text/javascript">
			Vue.createApp({
   
				data() {
   
					return{
   
						msg:"666666"
					}
				}
			}).mount("#app")

将vue实例中msg的内容展示在p标签里只需要在p标签内部写v-text

2.文本渲染指令{ {}}

<div id="app">
			<p>{
   {
   msg}}</p>
			<h1>{
   {
   msg}}</h1>
			<p>{
   {
   1+2}}</p>
			<