Vue全家桶（Vue基础看这篇就够了）

    1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；

2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

3.root容器里的代码被称为【Vue模板】；

    4.Vue实例和容器是一一对应的；

5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；

   6.{ {xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；

   7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>初识Vue</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
	

		<!-- 准备好一个容器 -->
		<div id="root">
           <h1>{
  {hello}},{
  {world}}</h1>
        </div>
<script>
    const vm=new Vue({
        el:"#root",//通过css选择器找到容器 第二种写法：el：document.getElementById
        data:{//用于存储数据，供el所指定的容器去使用
            hello:'hi',
            world:'zxz'
        }
    })
</script>
		
	</body>
</html>

1.3 模板语法

Vue模板语法有2大类：

1.插值语法：

功能：用于解析标签体内容。

写法：{ {xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。

举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写js表达式，

且可以直接读取到data中的所有属性。

备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

<!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">
            <h1>插值语法</h1>
            <p>hello,{
  {name}}</p>
            <h1>指令语法</h1>
            <a v-bind:href="url">点我</a>
            <!-- 简便写法 -->
            <a :href="url">点我</a>
        </div>
    </body>
    <script>
       new Vue({
        el:'#root',
        data:{
            name:'world',
            url:'https://cn.vuejs.org/index.html'
        }
    })
    </script>
    
</html>

1.4 数据绑定

Vue中有2种数据绑定的方式：

1.单向绑定(v-bind)：数据只能从data流向页面。

2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：

1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

1.5 el和data的两种写法

//第一种写法
const v=new Vue({
   el:'#root',
   data:{
      name:'xxx'
  }}
//el第二种写法
//最后指定容器
v.$mount('#root') //挂载到页面上

//data第二种写法 必须用普通函数
data:function(){
    console.log(this)//此处的this是vue实例对象 但是如果用箭头函数写  这里的this就是window
    return{
           name:'xxx'
}}

//简写方式
data(){
    console.log(this)
    return{
           name:'xxx'
}}

1.el有2种写法

(1).new Vue时候配置el属性。

(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

2.data有2种写法

(1).对象式

(2).函数式

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3.一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

1.6 MVVM模型

1.M：模型：对应data中的数据

2.V：视图：对应页面模板

3.VM：视图模型：Vue实例对象（连接M和V的桥梁，页面更新数据更新，数据更新页面也更新）

4.data中所有的属性，最后都出现在了vm身上。

5.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。

1.7 Object.defineProperty方法

可以高级的控制数据的删改枚举

<script type="text/javascript" >
			let number = 18
			let person = {
				name:'张三',
				sex:'男',
			}

			Object.defineProperty(person,'age',{
				// value:18,
				// enumerable:true, //控制属性是否可以枚举，默认值是false
				// writable:true, //控制属性是否可以被修改，默认值是false
				// configurable:true //控制属性是否可以被删除，默认值是false

				//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
				get(){
					console.log('有人读取age属性了')
					return number
				},

				//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
				set(value){
					console.log('有人修改了age属性，且值是',value)
					number = value
				}

			})

			// console.log(Object.keys(person))

			console.log(person)

1.7.1 什么是数据代理

通过一个对象代理对另一个对象中的属性的操作：读/写

//最简单的数据代理：通过obj2操作obj的x
<script type="text/javascript" >
			let obj = {x:100}
			let obj2 = {y:200}

			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})
		</script>

1.7.4 Vue中的数据代理

1.Vue中数据代理的好处：

更加方便的操作data中的数据

2.基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性，都指定一个getter/setter。

在getter/setter内部去操作（读/写）data中对应的属性。

1.8 事件处理

1.事件的基本使用：

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

2.事件的回调需要配置在methods对象中，最终会在vm上；

3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；

4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；

5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

2.Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）；

2.stop：阻止事件冒泡（常用）；

3.once：事件只触发一次（常用）；

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件；

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<button @click.once="showInfo">点我提示信息</button>

3.Vue中常用的按键别名：

回车 => enter

删除 => delete (捕获“删除”和“退格”键)

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown去使用)（失去焦点）

上 => up

下 => down

左 => left

右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

//当回车按下弹起后，拿到键入的值
<body>
		
		<div id="root">
			<h2>欢迎来到{
  {name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

		new Vue({
			el:'#root',
			data:{
				name:'zxz'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
                    //e.key拿到按键名，e.keyCode拿到按键编码
					console.log(e.target.value)
					//每次触发DOM事件时会产生一个事件对象（也称event对象），
					//此处的参数e接收事件对象。而事件对象也有很多属性和方法，其中target属性是获取触发事件对象的目标，
					//也就是绑定事件的元素，e.target表示该DOM元素，然后在获取其相应的属性值
				}
			},
		})
	</script>

1.9 计算属性

1.定义：要用的属性不存在，要通过已有属性计算得来。

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

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

(1).初次读取时会执行一次。

(2).当依赖的数据发生改变时会被再次调用。

4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5.备注：

1.计算属性最终会出现在vm上，直接读取使用即可。

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

		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{
  {fullName}}</span> <br/><br/>
		
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				
			},
			computed:{
				/*fullName:{
					//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
					//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
					//完整写法
				 
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					},
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				} */
				//简写 在后期不考虑修改时
				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
			}
		})
	</script>

通过setter修改

1.9天气案例

点击切换天气，上方变为炎热

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{
  {info}}</h2>
			<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
			<!-- <button @click="isHot = !isHot">切换天气</button> -->
			<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
				}
			},
		})
	</script>
</html>

1.9.1 用监视属性watch写

监视属性watch：

1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

2.监视的属性必须存在，才能进行监视！！

3.监视的两种写法：

(1).new Vue时传入watch配置

(2).通过vm.$watch监视

 //第一种写法：明确知道要监视的对象
			watch:{
				info:{
					//immediate:true,//立即执行
					//当ishot发生变化时调用，可以把ishot发生变化前后的值都给到(newValue,oldValue)
                    //也可以监测info，data
					handler(newValue,oldValue){
                          console.log("info被修改了",newValue,oldValue)
					}
				}
			}
		})
// 第二种写法：后期根据用户需求才知道监视对象方便调用
       vm.$watch('isHot',{
           //immediate:true,//立即执行
					//当ishot发生变化时调用，可以把ishot发生变化前后的值都给到(newValue,oldValue)
                    //也可以监测info，data
					handler(newValue,oldValue){
                          console.log("info被修改了",newValue,oldValue)
					}
				}

1.9.2 深度监视

深度监视：

(1).Vue中的watch默认不监测对象内部值的改变（一层）。

(2).配置deep:true可以监测对象内部值改变（多层）。

备注：

(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>a的值是:{
  {Number.a}}</h1> <br>
            <button @click="Number.a++">点我让a加1</button><br>
            <h1>b的值是:{
  {Number.b}}</h1> <br>
            <button @click="Number.b++">点我让b加1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				Number:{
                    a:1,
                    b:1
                }
			},
            
            watch:{
                // 需求：只监视a，不监视b
                //监视多级i二狗中某个属性的变化
                'Number.a':{
                    handler(){
                        console.log("a变了")
                    }
                },
                //需求：监视number中所有数据的变化 ，不管多少级
                //深度监视
                
                Number:{
                    deep:true,
                    handler(){
                        console.log("number变了")
                    }
                },

            }
			
		})
	</script>

1.9.3 简写

			watch:{
				//正常写法
				/* isHot:{
					// immediate:true, //初始化时让handler调用一下
					// deep:true,//深度监视
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}, */
				//简写 
				/* isHot(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue,this)
				} */
			}
		})

		//正常写法
		/* vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			deep:true,//深度监视
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}) */

		//简写
		/* vm.$watch('isHot',(newValue,oldValue)=>{
			console.log('isHot被修改了',newValue,oldValue,this)
		}) */

1.10 绑定class样式

           绑定样式：
                   1. class样式
                               写法:class="xxx" xxx可以是字符串、对象、数组。
                                       字符串写法适用于：类名不确定，要动态获取。
                                       对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
                                       数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
                   2. style样式
                               :style="{fontSize: xxx}"其中xxx是动态值。
                               :style="[a,b]"其中a、b是样式对象。

		<style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			
			.happy{
				border: 4px solid red;;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}
			.normal{
				background-color: skyblue;
			}

			.at1{
				background-color: yellowgreen;
			}
			.at2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.at3{
				border-radius: 20px;
			}
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
			<div class="basic" :class="mood" @click="changeMood">{
  {name}}</div> <br/><br/>

			<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
			<div class="basic" :class="classArr">{
  {name}}</div> <br/><br/>

			<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
			<div class="basic" :class="classObj">{
  {name}}</div> <br/><br/>

			<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style="styleObj">{
  {name}}</div> <br/><br/>
			<!-- 绑定style样式--数组写法 -->
			<div class="basic" :style="styleArr">{
  {name}}</div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'zxz',
				mood:'normal',
				classArr:['at1','at2','at3'],
				classObj:{
					atguigu1:false,
					atguigu2:false,
				},
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},
			methods: {
				changeMood(){
					const arr = ['happy','sad','normal']
					const index = Math.floor(Math.random()*3)
					this.mood = arr[index]
				}
			},
		})
	</script>

1.11 条件渲染v-if,v-show

1.v-if

写法：

(1).v-if="表达式"

(2).v-else-if="表达式"

(3).v-else="表达式"

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.v-show

写法：v-show="表达式"

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

		<!-- 准备好一个容器-->
		<div id="root">
			<h2>当前的n值是:{
  {n}}</h2>
			<button @click="n++">点我n+1</button>
			<!-- 使用v-show做条件渲染 -->
			<!-- <h2 v-show="false">欢迎来到{
  {name}}</h2> -->
			<!-- <h2 v-show="1 === 1">欢迎来到{
  {name}}</h2> -->

			<!-- 使用v-if做条件渲染 -->
			<!-- <h2 v-if="false">欢迎来到{
  {name}}</h2> -->
			<!-- <h2 v-if="1 === 1">欢迎来到{
  {name}}</h2> -->

			<!-- v-else和v-else-if -->
			<!-- <div v-if="n === 1">Angular</div>
			<div v-else-if="n === 2">React</div>
			<div v-else-if="n === 3">Vue</div>
			<div v-else>哈哈</d

最低0.47元/天解锁文章

一只829

关注

18
点赞
踩
205

收藏

觉得还不错? 一键收藏
5
评论
Vue全家桶（Vue基础看这篇就够了）

第一章：vue核心1.1.Vue 简介1.1.1 官网 1.英文官网：Vue.js - The Progressive JavaScript Framework | Vue.js 2.中文官网：Vue.js1.1.2 Vue是什么？一套用于构建用户界面的渐进式Javascript框架作者：尤雨溪1.1.3 Vue的特点 1.采用组件化模式，提高代码复用率、且让代码更好维护 2.声明式代码，让编码人员无需直接操作DOM，提高开发效率 3...
复制链接

扫一扫