learnVue第一阶段总结

最新推荐文章于 2024-05-10 10:00:39 发布

不爱学习的乔先生

最新推荐文章于 2024-05-10 10:00:39 发布

阅读量133

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/MrQiao_/article/details/115132720

版权

一 var、let、const与字面量的增强写法

修饰符var

var在if for这些代码块中没有作用域，是全局变量，有一处对var修饰的变量进行修改，各部分引用都将发生变化（引用的是地址值）

/**
<div>
			<button type="button">button1</button>
			<button type="button">button2</button>
			<button type="button">button3</button>
			<button type="button">button4</button>
			<button type="button">button5</button>
		</div>
**/	
/**
	当条件满足的时候点击第4个按钮（从零开始的）输出的是5
	在没有作用域的情况下for指令将i的进行了5次相加 
**/

var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
    if (i == 3) {   
        buttons[i].addEventListener('click', function() {
            console.log("第 ", i, " 个按钮被点击了");
        })
    }
}

对于var修饰的对象可以通过函数操作，函数有作用域

//闭包 匿名内部类
for (var i = 0; i < buttons.length; i++) {
    (function(num) {
        buttons[num].addEventListener('click', function() {
            console.log("第 ", num, " 个按钮被点击了");
        })
    })(i)
}
//闭包拆开就等于
for (var i = 0; i < buttons.length; i++) {
    onClickCOnsole(i);
}
function onClickCOnsole(num) {
    buttons[num].addEventListener('click', function() {
        console.log("第 ", num + 1, " 个按钮被点击了");
    })
}

修饰符let

在es6中引入let解决var没有作用域问题，在for循环中可以直接使用

for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
        console.log("第 ", i + 1, " 个按钮被点击了");
    })
}

修饰符const

被const修饰的被称为常量，不能修改对象的地址值的指向但是可以修改对象中的属性

//不能修改的意思是不能给对象重新赋值
//UncaughtTypeError: Assignment to constant variable
const name ='qjl';
//不可以修改为
name='111';

//可以修改对象的属性
const obj={
    name:"qjl",
    age:"26"
}
console.log("对象属性修改前==>", obj);
obj.name='1111'
console.log("对象属性修改后==>", obj);

定义的常量必须赋值，否则提示Missing initializer in const，不能正常运行

字面量的增强写法

const name = 'qjl';
const age = 27;
//es5 面向量的写法
const obj = {
    'name': name,
    'age': age,
    run: function(objName) {
        console.log(objName, '正在奔跑')
    }
}
console.log(obj,obj.run('兔子'));


//es6面向量的增强写法
const es6obj = {
    name,
    age,
    run(objName) {
        console.log(objName, '正在奔跑')
    }
}
console.log(es6obj,es6obj.run('兔子'));

二创建一个Vue实例

创建一个简单的Vue实例必须将元素交给Vue管理，否则无法使用Vue进行解析。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!--mustache语法获取值-->
            <h1>{{message}}</h1>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el:'#app'//将id为app这元素交给vue实例管理
                //data 对象存放 id为app元素所需要的数据
                data:{
					message:'Hello World!'
           		 }
             })
        </script>
    </body>
</html>

三插值

mustache语法

mustache 在被Vue管理的元素中进行取值，用法比较灵活比，可以进行字符串的拼接也可以进行计算

const app =new Vue({
    el:'#app',
    data:{
        fristName:'q',
        lastName:'jl',
        counter:100
        
    }
})

<div id ="app">
    <h2>{{fristName +'·'+ lastName}}</h2>
    <h2>{{fristName}} · {{lastName}}</h2>
    <h2>{{counter*2}}</h2>
</div>

v-once

修饰数据只会被渲染一次，之后再修改数据也不会再被Vue重新进行渲染
```
<h2 v-once>{{counter}}</h2>
```

v-html

将字符串中包含的页面标签进行解析转成页面代码

const app =new Vue({
    el:'#app',
    data:{
        message:"你可以打开<a href='https://www.baidu.com/>百度<a>"        
    }
})

<div>
 	<h2 v-html="message"></h2>
</div>

v-text

数据以字符串形式进行展示，不能进行字符串的拼接

<div>
    <!--哇哈哈将会被覆盖-->
 	<h2 v-text="message">哇哈哈</h2>
</div>

v-pre

指令数据将不被解析

<div>
    <!--页面展示的是{{message}}-->
 	<h2 v-pre>{{message}}</h2>
</div>

v-cloak

再页面没有渲染完成的时候页面会展示语法指令，加上v-cloak页面会在渲染完之后再展示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <!-- 在数据渲染完成前不展示 cloak斗篷 -->
        <div id="app" v-cloak>
            <h1>{{message}}</h1>
            <h2>{{name}}</h2>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            setTimeout(function (){ new Vue({
                el: '#app', //将id为app得元素交个Vue管理 挂载要管理的元素
                data: { //要挂载得元素所需要的数据
                    message: '学习vue go go',
                }
            })},1000)	
        </script>
    </body>
</html>

四动态绑定属性

v-bind 动态绑定属性，将动态的数据绑定到元素中进行展示

基本使用

<img v-bind:src="url"/>
<!--语法糖写法-->
<img :src="url">

const app =new Vue({
    el:'#app',
    data:{
        url:'https://www.runoob.com/wp-content/uploads/2017/01/vue.png'
    }
})

class中以对象的形式使用

<style>
    .active {
        color: red;
    }
</style>
<!-- :class可以传递对象 使用方式{class:boolean} true 添加class false 移除class -->
<!-- 两个class 进行合并 不会被覆盖 -->
<h1 class="title" :class="{active:isActive,line:isLine}">{{message}}</h1>

const app = new Vue({
    el: '#app', //将id为app得元素交个Vue管理 挂载要管理的元素
    data: { //要挂载得元素所需要的数据
        message: '学习vue go go',
        active: 'active',
        isActive: true,
        isLine: true
    }
})

class中以数组的方式使用

<style>
    .active {
        color: red;
    }
</style>
<div id="app">
    <!-- 数组是固定的，不能动态控制 -->
    <h1 class="title" :class="classs">{{message}}</h1>
    <h1 class="title" :class="[clasa,clasb]">{{message}}</h1>
    <h1 class="title" :class="getClass()">{{message}}</h1>
</div>

const app = new Vue({
    el: '#app', //将id为app得元素交个Vue管理 挂载要管理的元素
    data: { //要挂载得元素所需要的数据
        message: '学习vue go go',
        classs: ['aa', 'bb'],
        clasa: 'aa',
        clasb: 'bb'
    },
    methods: {
        getClass: function() {
            return ['aa', 'bb'];
        }
    }
})

style中以对象的方式使用

<div id="app">
    <!-- 数组是固定的，不能动态控制 -->
    <h1 class="title" :style="fontSize" >{{message}}</h1>
    <!-- 'red'字符串 -->
    <h1 class="title" :style="{color:'red'}" >{{message}}</h1>
    <!-- fontColor变量 样式属性驼峰 -->
    <h1 class="title" :style="{fontSize:fontSize1 +'px',backgroundColor:'red'}" >{{message}}</h1>
    <h1 class="title" :style="getStyle()>{{message}}</h1>
</div>

const app = new Vue({
    el: '#app', 
    data: {
        fontSize: 'font-size:10px',
        fontSize1: '10',
        message:'你k你擦'
    },
    methods: {
        getStyle: function() {
            return {
                'color': 'red',
                'font-size': '20px'
            }
        }
    }
})

style中以数组的方式使用

<!-- 数组是固定的，不能动态控制 -->			
<h1 :style="[fontSize,backgroundColor]" :class="classs">{{message}}</h1>

const app = new Vue({
    el: '#app',
    data: {
        fontSize: {fontSize:'10px'},
        backgroundColor: {backgroundColor:'red'}
    },
})

五计算属性

computed 计算属性在数据不发生变化的情况下之后被执行一次。计算属性由set与get两部分函数组成，通常情况下用的是get方法。

计算属性基本使用

cost app = new Vue({
    el:'#app',
    data:{
        nums:[1,2,3,4,5,6]
    }
    computed:{
		sum:{
    		set:function(newValue){
		    	console.log("set被调用了",newValue)
    			this.nums=newValue;
			},
			get:function(){
              	console.log("get被调用了")
              	let total=0;
              	for(let item of this.nums){
               	   total+=item;
              	}
                return total;
            }
		}
	}
})

<div id ="app">
    <!--这里调取的是计算属性的get函数-->
    <h2>{{sum}}<h2>
</div>

计算属性的语法糖写法（get简写）

const app =new Vue({
    el:'#app',
    data:{
        nums:[1,2,3,4,5,6]
    },
    computed:{
        //这里只是计算属性的get方法
        sum(){
            let total = 0;
            for (let item of this.nums) {
                total += item;
            }
            return total;
        }
    }
})

<div id ="app">
    <!--这里调取的是计算属性的get函数-->
    <h2>{{sum}}<h2>
</div>

computed 与methods 的区别

在数据不发生变化的前提下，不管计算属性调用多少次get函数都只会被调用一次，每次计算完毕后都会在内存中缓存一份数据，而methods每调用一次函数都会被执行一次。

const app =new Vue({
    el:'#app',
    data:{
       nums:[1,2,3,4,5,6] 
    },
    computed:{
        //这里只是计算属性的get方法
        sum(){
            console.log("计算属性被调用了");
            let total = 0;
            for (let item of this.nums) {
                total += item;
            }
            return total;
        }
    },
    methods:{
        getSum(){
           console.log("函数被调用了");
            let total = 0;
            for (let item of this.nums) {
                total += item;
            }
            return total;
        }
    }
})

<div id ="app">
    <h2>{{sum}}</h2>
    <h2>{{sum}}</h2>
    <h2>{{sum}}</h2>
    <h2>{{getSum()}}</h2>
    <h2>{{getSum()}}</h2>
    <h2>{{getSum()}}</h2>
</div>

六事件监听 v-on

v-on基本使用与语法糖

<div id="app">
    <h2>{{counter}}</h2>
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
    <button @:click="add">+</button>
    <button @:click="sub">-</button>
</div>

const app = new Vue({
    el:'#app',
    data:{
        counter:0
    },
    methods:{
        add(){
            this.counter++;
        }
        sub(){
    		this.counter--;
		}
    }
})

v-on传参问题

<!-- 没有参数调用的方法可以省略括号-->
<!-- <button type="button" @click="but1Click">按钮1</button> -->
<button type="button" @click="but1Click()">按钮1</button>

<!-- 调用的方法需要参数 -->
<!-- <button type="button" @click="but2Click(123)">按钮2</button> -->
<!-- 带小括号不传参数，入参的参数为undefined -->
<!-- <button type="button" @click="but2Click()">按钮2</button> -->
<!--不带小括号Vue将浏览器创建的事件对象当做参数进行入参 -->
<button type="button" @click="but2Click">按钮2</button>

<!-- 函数需要多个参数 -->
<!-- 不带小括号，参数1是event对象，参数2是undefined，以此类推 -->
<!-- <button type="button" @click="but3Click">按钮3</button> -->
<!-- 传一个参数方法参数1被赋值，参数2为undefined -->
<button type="button" @click="but3Click(123)">按钮3</button>
<!-- $event 为点击的事件 -->
<button type="button" @click="but3Click(123,$event)">按钮3</button>

const app = new Vue({
    el: '#app',
    data: {},
    methods: {
        but1Click() {
            console.log('but1被点击了')
        },
        but2Click(obj) {
            console.log(obj)
        },
        but3Click(obj, event) {
            console.log(obj, event, "---")
        }
    }
})

v-on修饰符

<div id="app">
    <!-- 阻止冒泡事件。@click.stop -->
    <div @click="divClick">
        哇哈哈
        <button type="button" @click.stop="but1Click">按钮1</button>
    </div>
    <br>
    <!-- 禁用默认的事件，使用自己自定义的方法进行操作 -->
    <form action="baidu">
        <input type="submit" value="提交" @click.prevent="submitClick" />
    </form>

    <br>
    <!-- 键盘键帽弹起事件 -->
    <input type="text" @keyup.enter="textClick" />

    <!-- 点击事件只被触发一次 -->
    <button type="button" @click.once="onceClick">onceClick</button>
</div>

不爱学习的乔先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
learnVue第一阶段总结

一 var、let、const与字面量的增强写法let和var作用域修饰符varvar在if for这些代码块中没有作用域，是全局变量，有一处对var修饰的变量进行修改，各部分引用都将发生变化（引用的是地址值）/**<div> <button type="button">button1</button> <button type="button">button2</button> <button type="
复制链接

扫一扫