Vue

概述

构建用户界面的渐进式javascript框架

安装

    <script src="vue.js">

实例化

模板

   <div id=“app”></div>

创建app

   const app = Vue.createApp({
   data(){ return {}}
})

挂载

   app.mount("#app")

内置指令

v-tex

1. v-text只能写一行表达式,不能写复杂js

v-bind

1. 在标签里可以简写为: : 如:title

v-if和v-else

	<div id="app">
		<p v-if = "canuse">吃点肉夹馍</p>
		<p v-else>喝点饮料</p>
	</div>
	<script type="text/javascript">
		Vue.createApp({
			data(){
				return{
					canuse:true
				}
			}
		}).mount("#app")
	</script>

v-if和v-show

1. 需要多次引用多次删除使用show,需要直接删除用if

 	<div id="app">
		<p v-if = "can">直接被删除</p>
		<p v-show = "can">通过css方式删除</p>
	</div>
	<script type="text/javascript">
            Vue.createApp({
                data(){
                    return{
                        can:false
                    }
		}
            }).mount("#app")
        </script> 

v-if和v-for

1. v-if的优先级更高
2. v-for使用template标签

	<div id="app">
		<template v-for="item in 10">
			<p v-if="item%2===0">{{item}}</p>
		</template>
	</div>
	<script>
		Vue.createApp({
                    data(){
                        return {}
                    }
		}).mount("#app")		
	</script> --> 

v-on

1. 可以缩写为@符号来监听dom事项
2. 实例

 	<div id="app">
		<p>
                    <button @click="add(-1)">-</button>
                    <span>{{num}}</span>
                    <button @click="add(1)">+</button>
		</p>
	</div>
	<script>
                Vue.createApp({
                    data(){
			return {num:1}
                    },
                    methods:{
                        add(n){
                            this.num+=n;
			}
                    }
		}).mount("#app")
	</script>

总结

1. 主要学习了vue的内部指令,实现了指令功能
2. 完成了选项卡案例