Vue

概述

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

安装

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

实例化

模板

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

创建app

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

挂载

   app.mount("#app")

双大括号{{}}

可写在标签里边作为展示内容

内置指令

v-tex

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

v-bind

在标签里可以简写为: 如: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

需要多次引用多次删除使用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

v-if的优先级更高
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

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

 	<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>

事件响应

行内处理

可以写在标签里,给标签添加点击事件或其他时间

    @click="num++"

方法响应

   methods:{
        say(e){ //默认会有个事件参数}
   }

内联传参

可以在say方法中写入点击的事件对像

    @click=“say(msg,$event)”

事件修饰符

stop 阻止事件冒泡
prevent 阻止默认事件
once 执行一次

按键修饰符

确定那个按键被按下

enter回车
esc取消
delete删除
space空格

系统修饰符

ctrl
shift
alt

鼠标修饰符

left鼠标左键
right鼠标右键
middle鼠标中间

计算computed

对于任何包含响应式数据的复杂逻辑,都应该使用计算属性实例:

    <div id="app">
		<h3>计算</h3>
		<p>计算出的数据是只读的,不可修改</p>
		<p>{{msg}}</p>
		<input type="text" v-model="rmsg">
		<p>{{rmsg}}</p>
    </div>
    <script>
        Vue.createApp({
			computed:{
				"rmsg"(){
					return this.msg.split('').reverse().join('');
					return this.msg.split('').reverse().join('');
				}
			},
			data(){
				return {
					msg:"你好呀!我的家乡"
				}
			}
			
		}).mount("#app")
    </script>

效果图片:

监听watch

监听数据变化,并执行handler函数回调实例:

    <div id="app">
		<h1>监听</h1>
		<p>监听数据变化,并执行handler函数回调</p>
		<button @click="num++">{{num}}</button>
		<button @click="num+=5">{{num}}</button>
    </div>
    <script>
        Vue.createApp({
			watch:{
				"num":{
					handler(nval,oval){
						console.log("数据由",oval,"变化为:",nval);
					},
					deep:true
				}
			},
			data(){
				return {
					num:1
				}
			}
		}).mount("#app")
    </script>

效果:

类的绑定

实例:

    <div id="app">
		<h1>类的绑定</h1>
		<button @click="flag=0" :class="{'active':flag == 0}">开</button>
		<button @click="flag=1" :class="{'active':flag == 1}">关</button>
		<br>
		<button :class="styleobj" @click="styleobj.active = !styleobj.active">
			<span v-if="styleobj.active">开</span>
			<span v-else>关</span>
		</button>
		<br>
		<button type="button" @click="styleobj.active=!styleobj.active">
                颜色{{styleobj.active}}</button>
		<button type="button" @click="styleobj.isBig=!styleobj.isBig">
                大小{{styleobj.isBig}}</button>
		<p :class="styleobj">绵延万万里的脊梁,撑起家国傲骨</p>
		
		<p :class="list">绵延万万里的脊梁</p>
		<p :class="['active','isBig']">撑起家国傲骨</p>
    </div>
    <script>
        Vue.createApp({
			data(){
				return {
					flag:0,
					styleobj:{
						"active":true,
						"isBig":true
					},
					list:['active','isBig']
				}
			}
			
		}).mount("#app")
    </script>

效果:

样式修改

可以直接在标签内绑定样式来修改样式

    <div id="app">
		<h1>修改样式</h1>
		<h3 :style="{'fontSize':'25px','color':'#f70'}">我是可爱标题</h3>
		<h3 :style="styles">凤兮凤兮归故乡,遨游四海求其凰</h3>
		<input type="color" v-model="styles.color">
		<input type="text" v-model="styles.fontSize">
    </div>
    <script>
        Vue.createApp({
			data(){
				return {
					styles:{
						"fontSize":"33px",
						"color":"#ff7700"
					}
				}
			}
			
		}).mount("#app")
    </script>

效果:可以直接在页面对颜色和字体大小进行修改

自定义指令

除了核心功能默认内置的指令,Vue也允许注册自定义指令
如果需要对普通DOM元素进行底层操作,这时候就会用到自定义指令聚焦实例:

    <div id="app">
		<input type="text" v-focus="flag" placeholder="请输入关键字">
		<button @click="flag=!flag">获取</button>
    </div>
    <script>
        Vue.createApp({
			data(){
				return {flag:true}
			},
			directives:{
				"focus":{
					beforeUpdate(el,binding){
						console.log(el,binding);
						if(binding.value){
							el.focus()
						}
					}
				}
			}
		}).mount("#app")
    </script>

效果:点击获取按钮可以实现聚焦和失焦的切换

总结

主要学习了vue的安装、实例化、内部指令、事件响应及监听等复杂操作
随着对Vue一步一步深入的学习,我学会了越来越多的案例
通过初步学习,我会的案例从注册、数字加减、到数据的添加删除,再到较为复杂的todolist,让我更有信心学下去

Vue通关大全,不看血亏啊

Vue

概述

安装

实例化