Vue基础进阶版，Web程序员的铁饭碗

目录

1.概述

2.应用实例

3.内置指令

4.事件响应

5.计算监

1.概述

vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 简单，高效，生态丰富（插件多）

前端的三大框架

（1）Vue

（2）React

（3）Angular

2.应用实例

2.1模板指令

<div id="app">

</div>

2.2创建app

    把app里面的内容称为模板 
    v-开头的属性称为 模板的指令
    通过指令把html模板和js联系在一起 

   .mount("#app")挂载

  Vue.createApp({
            data() {
                return {
                    msg: "Vue 棒棒哒!"
                }
            }
        }).mount("#app")

3.内置指令

3.1指令

是带有 v- 前缀的特殊 attribute。指令 的属性值预期是单个 JavaScript 表达式

3.2文本渲染指令

v-text     v-html     { {msg}}

应用案例

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

3.3属性渲染

v-bind

:    简写

代码案例如下

<div id="app">
			 <p v-bind:title="msg">我是个小p</p>
			 <p :title="msg">我是个小p</p>
			 <button :disabled="!canUse">按钮</button>
		</div>
		
		<script>
		Vue.createApp({
			data(){
				return {
					msg:"我学vue，我骄傲！",
					canUse:false,
				}
			}
		}).mount("#app")
	 
		</script>

3.4条件渲染