前端框架Vue语法部分(一)

一.mvvc模型:

vue中data的所有属性都会出现在 vue实例上，可直接用vue实例调用

二插值语法: 用于解析标签内容

用 { {}} 读取表达式或数据内容（表达式能自动获取data中的数据）

三.指令语法 用于解析标签属性 形式都为v-XXX

1.数据绑定:

①单向绑定:v-bind 可简写为冒号举例:<a :href="url"> </a> 冒号中的值将作为表达式执行

数据只能从data流向页面

②双向绑定:v-model 举例:<input type="text" v-model:value="name"></br>

可简写为: <input type="text" v-model="name"></br>

数据可以在data和页面互相流通，一般应用在表单类元素上（如:input、select等）

2.事件处理:

①使用v-on:xxx或 @xxx 绑定事件，其中xxx是事件名

②事件的回调需要配置在methods对象中

③modthods中配置的函数this都指向组件实例对象

④方法传参：加小括号即可 例如：@click="demo" 和@click"demo($event)"效果一致，但后者可以传参

(注意 : 在插入语法{ {}}中调用函数获取返回值时，需要加括号，否则加入的将是整个函数)

3.事件修饰:

1.prevent: 阻止默认事件

2.stop: 阻止事件冒泡

3.once: 事件只触发一次
阻止冒泡示例:
<button @click.stop="showInfo">点我</button>

4.键盘事件:

vue中常见的按键别名: 回车enter 、删除 delete 、退出 esc、空格space、换行tab、上 up 下 down、左 left、右 right；

两种获取方法：

keyup: 按下后抬起才触发

kepdown: 按下就触发
//示例:
<body>
    <div id="root">
    <input type="text" @keydown.up="showInfo">
    </div>


    new Vue({
        el:'#root',
        data:{      //数据,只有在data里的数据才会做数据劫持和数据代理
        },
        methods:{   //方法
            showInfo(e){
                console.log(e.target.value);
            }
        }
    })
</body>

5.计算属性

1.定义: 要用的属性不存在，要通过已有的属性计算得来（属性指vue实例中的数据，而不是在外面定义的值）

2.原理：底层借助了Object.defineproperty方法提供的getter和setter。

3.get函数什么时候执行？

①初次读取时会被执行一次

②当依赖的数据发生改变时会被再次调用

5.备注：

①计算属性最终会出现在vue实例中，直接读取使用即可

②如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生更新

举例：拼接姓名
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_methods实现</title>
		
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{
    
    {fullName()}}</span>    //直接调用fullName()方法获取全名
		</div>
	</body>

	<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			},
			methods: {
                //完整写法（有可能要修改）
                   /*
           fullName:{
            get(){
                return this.firstName + '-' + this.lastName;
                },    
            set(value){
                const arr =value.split('-')
                this.firstName = arr[0]
                this.lastName = arr[1]
                }
                        }
                    */
				fullName(){    //只读不改时可以用该简写方式
					return this.firstName + '-' + this.lastName
				}
			},
		})
	</script>
</html>

6.监视属性

① 监视属性watch：
                   1.当被监视的属性变化时, 回调函数(handler)自动调用, 进行相关操作
                   2.监视的属性必须存在，才能进行监视！！
                   3.监视的两种写法：
                           (1).new Vue时传入watch配置
                           (2).通过vm.$watch监视

举例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_监视属性</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{
    
    {info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			/* watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}
			} */
		})

		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
	</script>
</html>

②深度监视:
               深度监视：
                       (1).Vue中的watch默认不监测对象内部值的改变（一层）。
                       (2).配置deep:true可以监测对象内部值改变（多层）。
               备注：
                       (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
                       (2).使用watch时根据数据的具体结构，决定是否采用深度监视。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_深度监视</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{
    
    {info}}</h2>
			<button @click="changeWeather">切换天气</button>
			<hr/>
			<h3>a的值是:{
    
    {numbers.a}}</h3>
			<button @click="numbers.a++">点我让a+1</button>
			<h3>b的值是:{
    
    {numbers.b}}</h3>
			<button @click="numbers.b++">点我让b+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
				numbers:{
					a:1,
					b:1,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				isHot:{
					// immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				},
				//监视多级结构中某个属性的变化
				/* 'numbers.a':{        //注意用完整的key格式，加上引号
					handler(){
						console.log('a被改变了')
					}
				} */
				//监视多级结构中所有属性的变化
				numbers:{
					deep:true,
					handler(){
						console.log('numbers改变了')
					}
				}
			}
		})

	</script>
</html>

7.监视属性和计算属性的区别:

computed和watch之间的区别：

1.computed能完成的功能，watch都可以完成。

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。

前端框架Vue语法部分(一)

猜你喜欢