前端vue入门(纯代码)01

最新推荐文章于 2024-05-14 11:08:34 发布

neneduck

最新推荐文章于 2024-05-14 11:08:34 发布

阅读量209

点赞数

分类专栏： Vue前端文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/m0_62003092/article/details/130494976

版权

Vue前端专栏收录该内容

37 篇文章 3 订阅

订阅专栏

01.初识Vue

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>chushi_Vue</title>
  <!-- 引入开发版本Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 
初识Vue：
	1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象；
	2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法；
	3.root容器里的代码被称为【Vue模板】；
	4.Vue实例和容器是一一对应的；
	5.真实开发中只有一个Vue实例,并且会配合着组件一起使用；
	6.{{xxx}}中的xxx要写js表达式,且xxx可以 自动读取到data中的所有属性；
	7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新；

	注意区分：js表达式 和 js代码(语句)
		1.表达式：一个表达式会产生一个值,可以放在任何一个需要值的地方：
				(1). a
				(2). a+b
				(3). demo(1)
				(4). x === y ? 'a' : 'b'

		2.js代码(语句)
				(1). if(){}
				(2). for(){}
		-->

  <!-- 准备好一个容器 -->
  <div id="demo">
    <!-- vue的插值语法 -->
    <!-- name.toUpperCase()：大写 -->
    <h1>Hello,{{name.toUpperCase()}},{{address}}</h1>
  </div>

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

    //创建Vue实例
    new Vue({
      el: '#demo', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。 id选择器
      //data中用于存储数据,数据供el所指定的容器 #demo 去使用,值我们暂时先写成一个对象。
      // 纯中文的的数据 不太能支持
      data: { 
        name: 'assassinator',
        address: '小鸡岛'
        // name:'neneduck',
        // address:'hangzhou'
      }
    })

  </script>
</body>

</html>

02模板语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板语法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
		Vue模板语法有2大类：
		  1.插值语法：
			功能：用于解析标签体内容。
			写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
		  2.指令语法：
			功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
			举例：v-bind:href="xxx" 或  
       简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
		备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr/>
			<h1>指令语法</h1>
			<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
			<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				name:'jack',
				school:{
					name:'尚硅谷',
					url:'http://www.atguigu.com',
				}
			}
		})
	</script>
</html>

03.数据绑定

双向数据绑定：数据不仅能从data流向页面，还能从页面流向data。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>数据绑定</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
	Vue中有2种数据绑定的方式：
		1.单向绑定(v-bind)：数据只能从data流向页面。
		2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
			备注：
				1.双向绑定一般都应用在表单类元素上（如：input、select等）
				2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 普通写法 -->
			<!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
			双向数据绑定：<input type="text" v-model:value="name"><br/> -->

			<!-- 简写 -->
			单向数据绑定：<input type="text" :value="name"><br/>
			双向数据绑定：<input type="text" v-model="name"><br/>

			<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
			<!-- <h2 v-model:x="name">你好啊</h2> -->
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				name:'Wahaha'
			}
		})
	</script>
</html>

04._el与data的两种写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>el与data的两种写法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
	data与el的2种写法
		1.el有2种写法
			(1).new Vue时候配置el属性。
			(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
		2.data有2种写法
			(1).对象式
			(2).函数式
	如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
	    3.一个重要的原则：
			由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>你好，{{name}}</h1>
		</div>
	</body>

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

		//el的两种写法
		/* const v = new Vue({
			//el:'#root', //第一种写法
			data:{
				name:'AD钙奶'
			}
		})
		console.log(v)
		v.$mount('#root') //第二种写法 */

		//data的两种写法
		new Vue({
			el:'#root',
			//data的第一种写法：对象式
			/* data:{
				name:'AD钙奶'
			} */

			//data的第二种写法：函数式
			data(){
				console.log('@@@',this) //此处的this是Vue实例对象
				return{
					name:'AD钙奶'
				}
			}
		})
	</script>
</html>

05_MVVM模型

M：模型Model —>也就是data中的数据
V：视图View —>也就是模板代码
VM：视图模型ViewModel —>也就是Vue实例（vm）

MVVM采用：双向数据绑定。

View中数据变化将自动反映到Model上，反之，Model中数据变化也将会自动展示在页面上。

ViewModel就是View和Model的桥梁。

ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回到Model。

MVVM的核心思想：是关注Model的变化。让MVVM框架利用自己的机制自动更新DOM（即所说的View视图），也就是所谓的数据-视图分离

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>理解MVVM</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
	MVVM模型
		1. M：模型(Model) ：data中的数据
		2. V：视图(View) ：模板代码
		3. VM：视图模型(ViewModel)：Vue实例
	观察发现：
		1.data中所有的属性，最后都出现在了vm身上。
		2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校：{{name}}</h1>
			<h1>岛屿：{{address}}</h1>
			<!-- <h1>测试一下1：{{1+1}}</h1>
			<h1>测试一下2：{{$options}}</h1>
			<h1>测试一下3：{{$emit}}</h1>
			<h1>测试一下4：{{_c}}</h1> -->
		</div>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				name:'AD钙奶',
				address:'小鸡岛',
			}
		})
		console.log(vm)
	</script>
</html>

06.数据代理

1.回顾Object.defineProperty()方法的使用

Object.defineProperty(对象,添加的属性,{属性的值})方法

注意：通过Object.defineProperty（）方法添加的属性是：

1.不可枚举【该属性property不可被遍历】 2.不可被修改 3.不可被删除

“不可枚举” 举例说明：

  <script>       
   let person = {
      name: '张三',
      sex: '男',
    }
   // 设置的属性age不可被遍历【枚举】  且age属性不能被修改
  //  delete person.age  返回 false
    Object.defineProperty(person, 'age', {
      value: 18,
    })

    console.log(person)  //{name: '张三', sex: '男', age: 18}
    console.log(Object.keys(person))  // ['name', 'sex']
    </script>    
</body>

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

	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)
</script>

·何为数据代理？

		<!-- 数据代理：通过一个对象【obj2】代理对另一个对象【obj1】中属性【x1】的操作（读/写）-->
		<script type="text/javascript" >
			let obj1 = {x1:100}
			let obj2 = {y2:200}

			Object.defineProperty(obj2,'x1',{
				get(){
					return obj1.x1
				},
				set(value){
					obj1.x1 = value
				}
			})
		</script>
    <!-- 浏览器 控制器操作
         obj2
            {y2: 200}
            y2: 200
            x1: 100
            get x1: ƒ get()
            set x1: ƒ set(value)
            [[Prototype]]: Object
            // 通过对象obj2 代理 修改对象obj1里面的属性x1的值
            obj2.x1 = 300
            300
            obj1.x1
            300 
    -->

Vue中的数据代理

对于new Vue 配置项中的data，我们将其放置在vm._data中，并对vm._data中的数据进行代理，这样vm身上就有data中的属性，这样使我们更方便操作data中的数据。

	<body>
		<!-- 
				1.Vue中的数据代理：
							通过vm对象来代理data对象中属性的操作（读/写）
				2.Vue中数据代理的好处：
							更加方便的操作data中的数据
				3.基本原理：
							通过Object.defineProperty()把data对象中所有属性添加到vm上。
							为每一个添加到vm上的属性，都指定一个getter/setter。
							在getter/setter内部去操作（读/写）data中对应的属性。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'热干面',
				address:'wuhan'
			}
		})
	</script>

07.事件处理

1.事件的基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件的基本使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				事件的基本使用：
							1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
							2.事件的回调需要配置在methods对象中，最终会在vm上；
							3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
							4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
							5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- <button v-on:click="showInfo">点我提示信息</button> -->
			<button @click="showInfo1">点我提示信息1（不传参）</button>
			<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
		</div>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
			},
			methods:{
				showInfo1(event){
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				}
			}
		})
	</script>
</html>

2.事件的修饰符

冒泡是从里到外，所以触发了div里面的事件，div的事件也被触发了
捕获行为是由外层到内层，冒泡行为是由内层到外层
所有的事件都是·先捕获，再去冒泡·。

/* 子元素从父元素中溢出，想自动形成滚动条 */
				overflow: auto;

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>事件修饰符</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
  <style>
    * {
      margin-top: 20px;
    }

    .demo1 {
      height: 50px;
      background-color: skyblue;
    }

    .box1 {
      padding: 5px;
      background-color: skyblue;
    }

    .box2 {
      padding: 5px;
      background-color: orange;
    }

    .list {
      width: 200px;
      height: 200px;
      background-color: peru;
      /* 子元素从父元素中溢出，想自动形成滚动条 */
      overflow: auto;
    }

    li {
      height: 100px;
    }
  </style>
</head>

<body>
  <!-- 
				Vue中的事件修饰符：
						1.prevent：阻止默认事件（常用）；
						2.stop：阻止事件冒泡（常用）；             
						3.once：事件只触发一次（常用）；
						4.capture：使用事件的捕获模式；
						5.self：只有event.target是当前操作的元素时才触发事件；
						6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
		-->
  <!-- 准备好一个容器-->
  <div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!-- 阻止默认事件（常用） xxx.prevent 阻止该元素 a链接 跳转 -->
    <!-- <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a> -->
    <a href="http://www.atguigu.com" @click="showInfo">点我提示信息</a>

    <!-- 阻止事件冒泡（常用） 
      冒泡是从里到外，所以触发了div里面button的事件，而div的事件也被触发了，【阻止：外面的事件被阻止触发】
      -->
    <div class="demo1" @click="showInfo">
      <!-- <button @click="showInfo">点我提示信息</button> -->
      <button @click.stop="showInfo">点我提示信息</button>
      <!-- 修饰符可以连续写 -->
      <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
    </div>

    <!-- 事件只触发一次（常用） -->
    <button @click.once="showInfo">点我提示信息</button>

    <!-- 使用事件的捕获模式 ，捕获阶段触发 -->
    <div class="box1" @click.capture="showMsg(1)">
      div1
      <div class="box2" @click="showMsg(2)">
        div2
      </div>
    </div>

    <!-- 只有event.target是当前操作的元素时才触发事件； 
        此处@click.self=xxx ,就是必须点击demo1,元素盒子才会触发
      -->
    <!-- <div class="demo1" @click.self="showInfo">   -->
    <button @click="showInfo">点我提示信息</button>

    <!--不然，点击demo1时，只会弹出一次：同学你好！
           ，而点击button时，会先执行内层事件，再执行外层事件【冒泡】，会弹出两次弹窗-->
    <!-- <div class="demo1" @click="showInfo">  
				<button @click="showInfo">点我提示信息</button>
			</div> -->

    <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕；
           @wheel:鼠标的滚动轮 滚动触发
           @scroll:鼠标的滚动条 滚动触发
          如果不加passive,那就是，先执行回调函数demo，执行完毕后，再去执行事件的默认行为
          加passive,那就是，先执行事件的默认行为立即执行，无需等到回调函数demo执行完毕【有点像多线程工作】
        -->
    <ul class="list" @scroll.passive="demo">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>

</body>

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

  new Vue({
    el: '#root',
    data: {
      name: '尚硅谷'
    },
    methods: {
      showInfo (e)
      {
        // e.preventDefault()  // 阻止默认事件（常用） xxx.prevent 阻止该元素 a链接 跳转 ，并不是阻止弹窗【冒泡】
        // e.stopPropagation(); //阻止事件冒泡
        alert('同学你好！')
        console.log(e.target)  // <div class="demo1">…</div>
      },
      showMsg (msg)
      {
        console.log(msg)
      },
      demo ()
      {
        for (let i = 0; i < 10000; i++) {
          console.log('#')
        }
        console.log('累坏了')
      }
    }
  })
</script>

</html>

3.键盘事件

keyup键：按下+抬起才触发
keydown键：按下不用抬起就触发
e.keyCode:获取按下的键盘按键Unicode值【如：按下Enter，它的值是13】
e.key:获取按下的键盘按键名称【如：Enter】
表单中的 placeholder：可以用来描述输入字段预期值的简短的提示信息
@ 是 v-on: 的简写形式
@keydown.ctrl.y=“showInfo” 【表示：只有按下ctrl+y时才触发】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.Vue中常用的按键别名：
							回车 => enter
							删除 => delete (捕获“删除”和“退格”键)
							退出 => esc
							空格 => space
							换行 => tab (特殊，必须配合keydown去使用)
							上 => up
							下 => down
							左 => left
							右 => right

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

				3.系统修饰键（用法特殊）：ctrl、alt、shift、meta【windows键】
							(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
							(2).配合keydown使用：正常触发事件。

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

				5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
      <!-- placeholder可以用来描述输入字段预期值的简短的提示信息 
      @ 是 v-on: 的简写形式-->
			<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:'尚硅谷'
			},
			methods: {
				showInfo(e){
					console.log(e.key,e.keyCode)  //Enter 13
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>

08.计算属性

姓名案例_插值语法{{xxx}}实现

v-model指令：可以在表单 input、textarea以及select元素上创建双向数据绑定
表单提交是开发中非常常见的功能，也是和用户交互的重要手段：比如用户在登录、注册时需要提交账号密码；比如用户在检索、创建、更新信息时，需要提交一些数据；这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成
简写: v-model:value="firstName" -----> v-model="firstName"

<!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">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{firstName}}-{{lastName}}</span>
      <!-- 截取firstName的前三位，前闭后开  但是 不推荐改写法，越简洁越好-->
			<!-- 全名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span> -->
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			}
		})
	</script>
</html>

姓名案例_methods实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_methods实现</title>
		<!-- 引入Vue -->
		<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/>
      <!-- 这是把fullName方法调用的的返回值插入到这里了 -->
			全名：<span>{{fullName()}}</span>
      <!-- 这是把fullName 的函数插入到这里了 -->
			<!-- 全名：<span>{{fullName}}</span> -->
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三'
			},
			methods: {
				fullName(){
          // console.log('@',this)  // this : Vue() 实例
          // data里面的数据 一发生改变 这个模板就得重新解析，就是说，fullName()得调用很多次
					console.log('@---fullName')
					return this.firstName + '-' + this.lastName
				}
			},
		})
	</script>
</html>

3.姓名案例_计算属性实现

因为计算属性是基于缓存实现的，只在计算属性所依赖的数据发生改变时它们才会重新求值，否则访问计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_计算属性实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			计算属性：
					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/>
			测试：<input type="text" v-model="x"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
      <!-- 第一次读取fullName时，就调用了getter,第2,3,4次读取fullName,就不会调用getter了，
        计算属性会立即返回之前的计算结果，而不必再次执行函数【返回缓存里的值】
      而方法名，写几次就调用几次，没有缓存而言 -->
			<!-- 全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> -->
		</div>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				x:'你好'
			},
			methods: {
				demo(){		
				}
			},
			computed:{
				fullName:{
					//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
					//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
					get(){
						console.log('get被调用了')
						// console.log(this) //此处的this是vm
						return this.firstName + '-' + this.lastName
					},
					//set什么时候调用? 当fullName被修改时。
          // vm.fullName ='刺客-伍六七'
					set(value){  
						console.log('set',value)
            // 字符串 转换成 数组
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				}
			}
		})
	</script>
</html>

4.姓名案例_计算属性实现

<!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">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
			},
			computed:{
				//完整写法
				/* fullName:{
					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>
</html>

09.监事属性

1.天气案例

<!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>
			<!-- <h2>今天天气很</h2> -->

      <button @click="changeWeather">切换天气</button>

			<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
			<!-- <button @click="isHot = !isHot">切换天气</button> -->

			<!-- <button @click="changeWeather">切换天气</button> -->
      <!-- 浏览器中vue开发者工具中data.isHot 显示没有改变 
        但是，在控制台中，数据实际上变了 vm.isHot == false -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
		// new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
		})
	</script>
</html>

2.天气案例_监视属性

监视属性watch：
使用watch监听数据时，有三个选项，handler，deep，immediate
immediate:该值默认是false，在进入页面时，第一次绑定值，

不会立刻执行监听，只有数据发生改变才会执行handler中的操作

deep:vue是不能检测到对象属性的添加或删除，我们使用watch监听一个对象时，除非是直接重新给对象赋值，

否则是不能监听到对象里的值的变化的，deep就是用来进行深度监听的！

1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
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>
		<!-- 
				监视属性watch：
					1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
					2.监视的属性必须存在，才能进行监视！！
					3.监视的两种写法：
							(1).new Vue时传入watch配置
							(2).通过vm.$watch监视
		 -->
		<!-- 准备好一个容器-->
		<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)
					}
				}
			} 
		})

    // 不使用字符串方法，会去全局找isHot变量
		// vm.$watch('isHot',{
		// 	immediate:true, //初始化时让handler调用一下
		// 	//handler什么时候调用？当isHot发生改变时。
		// 	handler(newValue,oldValue){
		// 		console.log('isHot被修改了',newValue,oldValue)
		// 	}
		// }
    // )
	</script>
</html>

3.天气案例_深度监视

深度监视：
(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>
		<!-- 
				深度监视：
						(1).Vue中的watch默认不监测对象内部值的改变（一层）。
						(2).配置deep:true可以监测对象内部值改变（多层）。
				备注：
						(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
						(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
		 -->
		<!-- 准备好一个容器-->
		<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>
			<!-- <button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button> -->
      <h3>e的值是:{{numbers.c.d.e}}</h3>
			
		</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,
					c:{
						d:{
							e:100
						}
					}
				}
			},
			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':{
					handler(){
						console.log('a被改变了')
					}
				} ,

				//监视多级结构中所有属性的变化
				numbers:{
					deep:true,
					handler(){
						console.log('numbers改变了')
					}
				}
			}
		})

	</script>
</html>

4.天气案例_监视属性_简写

<!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调用一下
					// deep:true,//深度监视
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}, */
				//immediate和deep属性用不到时，才能 简写
				/* 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)
		}) */

	</script>
</html>

5.姓名案例_watch实现

计算属性不能开启异步任务去维护数据的
watch 不靠返回值，靠运算代码
watch 里面：定时器的回调函数写成了箭头函数的形式
vue管理的函数写成普通函数是为了确保this指向vue实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_watch实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
	computed和watch之间的区别：
		1.computed能完成的功能，watch都可以完成。
		2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
	两个重要的小原则：
		1.所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
		2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			},
			watch:{
				firstName(val){
					setTimeout(()=>{
						console.log(this)
            // 要保证 this 指向的是vm，vue实例对象
						this.fullName = val + '-' + this.lastName
					},1000);
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
				}
			}
		})
	</script>
</html>

neneduck

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端vue入门(纯代码)01

02模板语法03.数据绑定双向数据绑定：数据不仅能从data流向页面，还能从页面流向data。04._el与data的两种写法05_MVVM模型M：模型Model —>也就是data中的数据V：视图View —>也就是模板代码VM：视图模型ViewModel —>也就是Vue实例（vm）06.数据代理1.回顾Object.defineProperty()方法的使用注意：通过Object.defineProperty（）方法添加的属性是：Vue中的数据代理
复制链接

扫一扫