Vue 基础篇

最新推荐文章于 2024-08-30 21:30:00 发布
最新推荐文章于 2024-08-30 21:30:00 发布
阅读量158 收藏
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51225684/article/details/120015998
版权

系列文章目录

1.安装vue

2.创建Vue示例

3.数据与方法

4.生命周期

5.模板语法插值

6.模板语法指令

7.条件渲染v-if 、v-show 。列表渲染v-for使用

8.v-for、v-if 使用性能优化技巧

9.v-on/@click 监听事件

10.事件修饰符与按钮修饰符

11.系统修饰键

12.css样式class的多种用法

13.内联style

14.v-mode表单输入绑定、v-model值的绑定、v-model修饰符

15.双向绑定原理

16.todolist案例开发

17.computed计算属性 、watch监听

18.ref获取Dom

文章目录

一、安装vue

1.npm install vue 

2.vue init webpack my-project(项目名称)

这里需要进行一些配置，默认回车即可

This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob test@runoob.com
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated “my-project”.

To get started:
cd my-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack

3.cd my-project

4.npm install

5.npm run dev

二、创建Vue示例
       

var data={a:1}
//创建vue实列
var vm= new Vue({
   // 选项
    data:data
})
vm.a//=>1  // vm.a  是响应式的
vm.b = 2  // `vm.b` 是非响应式的
vm.$data  === data //=>true

var Component =Vue.extend({
 data:function (){
 return {a：1}
})

//对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property
// 可以使用 Vue.set(object, propertyName,value) 方法向嵌套对象添加响应式property。
 vue.set(vm.someObject,'b',2)
//还可以使用vm.$set ,这也是全局Vue.set方法的别名:
this.$set(this.someObject,'b',2)

三、数据与方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript" src="./js/vue.js"></script>
	<body>
		<div id="app">
			{{a}}
		</div>
	</body>
	<script type="text/javascript">
		// 文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例
		// 我们的数据对象
		var data = { a: 1 }
	
		// 该对象被加入到一个 Vue 实例中
		var vm = new Vue({
			el:'#app',
		    data: data   //第一个data是vue对象的属性，第二个data是数据对象的一个变量
		})
		//修改变量data的属性a值  达到响应式目的
		// data.a = 'hi...new...';
			
		//使用vm对象改变a属性的值
	  	   vm.a = "test";

		//或者使用 $改变属性值
		// vm.$data.a = "123";

		//vm改变属性a的值与data数据对象改变属性a的值是一样的
		// data.a == vm.a; 

		//watch 方法可以查看到获取变化前后的结果
		//使用$watch方法观察a属性的前后变化 记录变化前的值和变化后的值
		vm.$watch('a',function(newVal,oldVal){
			console.log(newVal,oldVal);
		})
		vm.a = "test....";
	</script>
</html>

四.生命周期

<body>
    <div id="app">
        <p>{{message}}</p>
        <button @click="changeMsg">改变</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        },
        methods: {
            changeMsg () {
                this.message = 'goodbye world'
            }
        },
        beforeCreate() {
            console.log('------初始化前------')
            console.log(this.message)
            console.log(this.$el)
        },
        created () {
            console.log('------初始化完成------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeMount () {
            console.log('------挂载前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        mounted () {
            console.log('------挂载完成---------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeUpdate () {
            console.log('------更新前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        updated() {
            console.log('------更新后---------')
            console.log(this.message)
            console.log(this.$el)
        }
    })
</script>

我们删除了el属性，看看结果 

在这里插入图片描述

 

 是不是只走了前面两个生命周期啊，后面就没走了，这个时候其实就是在等$mount被调用了，那我们加个按钮，点击按钮，手动调用一下$mount看会怎样

在这里插入图片描述

 点击后
在这里插入图片描述

 

可以看到，生命周期继续往下走了。

这时候不知道大家是不是想起来，看到有些vue项目的main.js里面是这样的

export default new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

 而有些vue项目中人家用的又是这样的

export default new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

 五、模板语法插值

v-once  //展示，后边赋值chage并未渲染到模板页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript" src="./js/vue.js"></script>
	<body>
		<div id="app" v-once>
			{{msg}}
		</div>
	</body>
	<script type="text/javascript">
		var  vm = new Vue({
			el:"#app",
			data:{
				msg:"hi vue",
			}
		});
		
		vm.msg="change";
	</script>
</html>

v-html //双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript" src="./js/vue.js"></script>
	<body>
		<div id="app">
			<!-- 这段HTML标签不解析 -->
			<p>Using mustaches: {{ rawHtml }}</p>
			<!-- 这段渲染的HTML标签会被解析 -->
			<p>Using v-html directive: <span v-html="rawHtml"></span></p>
		</div>
	</body>
	<script type="text/javascript">
		var  vm = new Vue({
			el:"#app",
			data:{
				rawHtml:'<span style="color:red">this is should be red</span>'
			}
		});
	</script>
</html>

：//到这种情况应该使用 v-bind 指令：   v-bind:属性=“变量”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript" src="./js/vue.js"></script>
	<body>
		<div id="app" v-once>
			<div v-bind:class="color">
				test...
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var  vm = new Vue({
			el:"#app",
			data:{
				// color:'red',
				color:'blue'  //设置绑定属性名为color的变量值为blue
			}
		});
	</script>
	<style type="text/css">
		.red{color: red;}
		.blue{color: blue;font-size: 100px;}
	</style>
</html>

js表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript" src="./js/vue.js"></script>
	<body>
		<div id="app" v-once>
			<!-- 进行加法运算 -->
			<p>{{number + 1}}</p>
			<!-- 三元运算  今天是你的生日吗 ? '是，祝你生日快乐' : '不是，同样祝你今天快乐'-->
			<p>{{ ok ? 'YES' : 'NO' }}</p>
			<!-- 函数运算的使用  split()将字符串以没有内容的形式拆分成字母数组，reverse()将数组翻转，join()将数组连接成字符串-->
			<p>{{ message.split('').reverse().join('') }}</p>
		</div>
	</body>
	<script type="text/javascript">
		var  vm = new Vue({
			el:"#app",
			data:{
				number:10, //数字运算
				ok:0, //三元运算
				message:'vue' //函数运算
			}
		});
	</script>
	
</html>

  六、v-for、v-if 使用性能优化技巧

情形一：先遍历，再判断时：由于v-for优先级大于v-if，所以，可以利用计算属性进行过滤优化：

<ul>
  <li
    v-for="item in arr"
    v-if="item.isActive"
    :key="user.id"
  >
    {{ item.name }}
  </li>
</ul>

转变成

<ul>
  <li
     v-for="item in activeUsers"
    :key="item.id"
  >
    {{ item.name }}
  </li>
</ul>
computed: {
  activeUsers: function () {
    return this.arr.filter(function (item) {
      return item.isActive
    })
  }
}

 情形二：先判断再遍历时：通过不同标签进行优化：举例：

<ul>
  <li
    v-for="item in arr"
    v-if="isActive"
    :key="user.id"
  >
    {{ item.name }}
  </li>
</ul>

转变成

<ul v-if="isActive">
  <li
    v-for="item in arr"
    :key="item.id"
  >
    {{ item.name }}
  </li>
</ul>

七.事件修饰符与按钮修饰符

事件修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
<button @click.stop="sayHi()">点击</button>

// 等同于
methods: {
    sayHi(e) {
        e.stopPropagation();
    }
}
<a href="https://www.baidu.com/" @click.prevent="toSay">百度</a>

// 相当于
methods: {
    toSay(e) {
        e.preventDefault();
    }
}

按键修饰符

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">。   // 回车键提交

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.delete="onEnter">.   // 一键清除内容
复制代码

例子：

// html
<div id="app">
        <form action="">
            <div>
                用户名：
                <input type="text" v-model="username">
            </div>
            <div>
                密码：
                <input type="text" v-model="password" @keyup.enter="success()">
            </div>
            <div>
                <input type="button" value="提交">
            </div>
        </form>
</div>

// vue
 methods: {
    success(e) {
        alert('提交成功了');
    }
}

总结

好好学，好好用，开心吖

勒布朗-前端
关注
小白学习Vue(3)--全局Api（Vue.set | Vue.directive | Vue.component等）
假人一个的博客
11-11 1607
3. 全局Api： 3-1. Vue.set()&&Vue.delete() 3-2. Vue.directive( id, [definition] ) 3-3. Vue.filter( id, [definition] ) 3-4. Vue.component( id, [definition] ) 3-5. Vue.extend( options ) 3-6. Vue.use( plugin ) 3. 全局Api： 全局：任何地方都可以使用  3-1. Vue.set()&amp.
Vue3中的 Vue.set()和Vue.delete()
qq_39960204的博客
06-01 2928
Vue3 中的 set() 和 delete()
24.vue3学习篇-响应式原理
最新发布
qq_34334992的博客
08-30 1166
在 Vue 2 中，Vue.set的实现主要是为了解决在 Vue 实例创建后，向响应式对象添加新属性时，新属性无法触发视图更新的问题。以下是对Vue.set实现原理的分析。
3-VUE -set
mao_mao37的博客
04-03 891
语法 ：Vue.set( target, key, value ) 参数： {Object | Array} target {string | number} key {any} value 返回值：设置的值。 用法： 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通...
Vue03指令、set监视原理等
m0_46691255的博客
11-01 498
条件渲染： 1.v-if 写法： （1）v-if="表达式" （2）v-else-if=“表达式 （3）v-else="表达式" 2.v-show 写法：v-show="表达式" 适用于：切换频率比较高的场景 特点：不展示的DOM元素被移除，仅仅是使用样式隐藏掉 3.备注：（1）使用...
vue3中修改数组
blue_121的博客
05-09 3197
因此，在Vue 3.x中，你不再需要像Vue 2.x中那样使用Vue.set或vm.$set，数组的响应式已经不需要任何额外的工作。函数创建响应式对象时，数组内部的元素也是响应式的，所以直接修改数组（如使用push, pop, shift, unshift, splice, sort, reverse等方法）会自动更新视图。的引用（如上面的例子所示），你将失去对原始响应式数组的引用，并且新的数组将是一个全新的响应式数组。本身已经是响应式的，你对其进行的任何修改（如添加、删除元素）都将是响应式的。
Vue3 中的 set() 和 delete()
wj1713520的博客
03-19 8182
在vue2中，我们使用set来设置对象的属性，让这个属性能够在页面中响应（显示出来）。 但是，vue3中不再需要使用set方法来实现响应了。 data() { return { person: { name: 'Wj' } } }, methods: { addAge() { this.$set(this.person, 'age', 22) // vue2中的做法 } // vue3中的做法 methods: { addAge() {
vue学习（vue基础篇、vue进阶篇、Vue模块篇）.rar
07-30
本资源包含`vue基础篇`、`vue进阶篇`和`Vue模块篇`三个部分，旨在帮助开发者全面理解和掌握Vue.js。 在`vue基础篇`中，你将学习到Vue的基础概念和核心特性，包括： 1. **安装与设置**：如何通过CDN或npm引入Vue.js...
vue基础篇.pdf
05-09
在深入讨论Vue的基础知识点之前，我们需要了解前端开发中的一些核心概念。 首先，SPA单页应用程序模式，它指的是一个Web应用，这个应用在用户与之交互的过程中只会加载一次HTML、JavaScript和CSS。在初始化加载完毕...
前端开发Vue基础篇：Day02 Vue基础知识.pdf
11-11
Vue基础知识 本文主要介绍了 Vue 基础知识，包括模板语法的插值操作、v-for 指令的 key 属性、reduce 方法的使用和计算属性的使用。 一、模板语法的插值操作 在 Vue 中，我们可以使用模板语法来插值操作。常用的...
前端开发Vue基础篇：Day01 初识Vue.pdf
11-08
Vue.js是当前前端开发领域中非常流行的一个JavaScript框架，它主要用来构建用户界面，属于渐进式框架。渐进式框架的意思是，开发者可以将Vue作为应用的一部分，逐步地添加到现有的项目中，而无需一开始就将所有代码...
Vue基础篇三：Vue的计算属性与侦听器
我的博客
10-05 1040
系列文章目录 Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 文章目录系列文章目录一、计算属性computed二、侦听器watch三、计算属性与侦听器的区别 一、计算属性computed 计算属性可以减少模板中的计算逻辑，进行数据缓存，提高性能。 <template> <div> <p>请输入字符串:</p> <input type="text" v-mode
Vue3 $set？
热门推荐
小草莓的博客
04-09 4万+
Vue3 $set?
Vue 3 高阶指南之 Set
人生代码 ---- 公众号
10-29 1924
高阶指南之 SetSet对象是值的集合，你可以按照插入的顺序迭代它的元素。Set中的元素只会「出现一次」，即 Set 中的元素是唯一的。Constructor 构造器创建一个新的 Set...
深入了解vue2向vue3变迁过渡的知识点
前端程序员、项目经理、人工智能博主
11-26 951
过渡类名 v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from。vue3.x中vue全面转向typescript，typescript提供了更好的类型检查，也支持复杂的类型推导。vue2.x使用的是Flow来进行开发,但是flow对于一些复杂的场景flow支持的不是很好。vue3当中，如果想要监听数组内容的变化那么必须要写deep。此更改统一了 3.x 中的普通插槽和作用域插槽。vue3提供了一种新的东西 ，叫做。在vue2中，实现数据监听使用的是。
Vue.set()的使用,以及对其进行深入解析
天命爱心职责的博客
01-03 5303
vue 在实例上添加新的属性的时候，该属性，并不是响应式的。同样删除某一属性的时候，也不会实时渲染到页面上。这个 set方法，对于数组来说，调用的就是splice,对于对象来说，使用的就是defineReactive，再添加了一个手动的视图更新。这就是set的原理。
Vue-Vue.set() 的原理及使用
qq_40792800的博客
01-11 1万+
上面刚刚讲完 Vue 监听对象的改变，接下来本应该说说数组的监听过程，但是在这里需要插播一节 Vue.set() ，这是因为 Vue.set() 与对象的连接较为紧密，所以串联在一起方便理解。 1、首先，定义一批数据用来渲染到页面上展示 <body> <div id="root"> <h2>姓名：{{student.name}}</h2> <h2>年龄：真实{{student.age.realAge}} 虚拟{{stude
Vue3的新特性
fmk1023的博客
02-14 3415
vue3新特性
Vue中Vue.set和this.$set的使用
qq_59076775的博客
01-12 2794
一.背景 vue初始化实例对象的时候会把属性转位setter/getter。这样数据才会是动态响应的(即data中的数据是动态响应的),vue才能监听到属性的添加，删除，修改(受ES5的限制)。 二.原理 (1)vue.set源码 import { set } from '../observer/index' ... Vue.set = set ... (2)this.$set源码 import { set } from '../observer/index' ... Vue.prototy
Vue.js教程：基础篇详解
"Vue教程基础篇" Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。本教程将概述Vue的基础知识，包括指令、数据绑定、生命周期钩子、单向数据流以及计算属性与方法的区别。 1. **v-bind、v-model、v-html...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

勒布朗-前端

请多多支持，留点爱心早餐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值