Vue笔记（尚硅谷，笔记会续更）

佩淇呢

已于 2023-01-30 20:00:52 修改

阅读量202

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端 Powered by 金山文档

于 2023-01-29 20:59:32 首次发布

本文链接：https://blog.csdn.net/m0_67880202/article/details/128794155

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

【01】初识Vue

官网：Vue 实例 — Vue.js (vuejs.org)

1.引入Vue

 <script type="text/javascript" src="../js/vue.js"></script>

2.hello案例

(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">
<!--    插值语法：{{name}}-->
    <h1>Hello，{{name.toUpperCase()}}，{{address}},{{Date.now()}}</h1>
</div>
<script>
    Vue.config.productionTip = false ; //阻止 vue 在启动时生成生产提示。

    //创建Vue实例
    new Vue({
        el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
        //el:document.getElementById('demo') //通常不这样使用
        data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
            name:'qiqi',
            address:'北京'
        }
    })

</script>

【02】模板语法

Vue模板语法有2大类：

1.插值语法：

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

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

2.指令语法：

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

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

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

备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子，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>

【03】数据绑定

1.单向绑定

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

<!-- 普通写法 -->
<input type="text" v-bind:value="name"><br/>
<!-- 简写 --> 
<input type="text" :value="name"><br/>

2.双向绑定

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

备注：

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

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

<!-- 普通写法 -->
<input type="text" v-model:value="name"><br/>
<!-- 简写 --> 
<input type="text" v-model="name"><br/>

【04】el与data的两种写法

1.el的两种写法

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

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

两种写法均可

const v = new Vue({
   //el:'#root', //第一种写法
   data:{
      name:'尚硅谷'
   }
})
console.log(v)
v.$mount('#root') //第二种写法 
//$mount是实例v的缔造者Vue的原型对象上的方法属性

2.data的两种写法

(1).对象式

(2).函数式

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

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

new Vue({
el:'#root',
//data的第一种写法：对象式
data:{
name:'尚硅谷'
} 
})

new Vue({
el:'#root',
//data的第二种写法：函数式
data(){
	console.log('@@@',this) //此处的this是Vue实例对象
	return{
		name:'尚硅谷'
		 }
	}
})

【05】MVVM模型

M：模型(Model) ：对应 data 中的数据

V：视图(View) ：模板

VM：视图模型(ViewModel) ： Vue 实例对象

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

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>

<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		//在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'北京',
			}
		})
		console.log(vm)
	</script>

【06】数据代理

1.回顾Object.defineProperty

Object.defineProperty0 定义对象中新属性或修改原有的属性。

object.defineProperty(obj, prop, descriptor)
●obj:必需。目标对象
●prop :必需。需定义或修改的属性的名字
●descriptor :必需。目标属性所拥有的特性

Object.defineProperty0第三个参数descriptor说明:以对象形式{}书写

●value: 设置属性的值默认为undefined

●writable: 值是否可以重写（修改）。true | false 默认为false

●enumerable:目标属性是否可以被枚举（被遍历）。true | false 默认为false

●configurable: 目标属性是否可以被删除或是否可以再次修改特性true | false 默认为false

通过 Object.defineProperty()可以把person的某一个属性进行一个get和set的拦截，只要访问这个属性，get方法就会调用，只要修改这个属性set方法就会调用

<script type="text/javascript" >
			let number = 18
			let person = {
				name:'张三',
				sex:'男',
			}
			Object.defineProperty(person,'age',{
				//当有人读取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(person)
		</script>

2.何为数据代理

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

用Object.defineProperty()进行简单的数据代理

<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>

3.vue中的数据代理

Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）

Vue中数据代理的好处：更加方便的操作data中的数据

基本原理通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。

【07】事件处理

1.事件的基本使用

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

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

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

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

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

只有再 data 里面的数据才会做数据代理，函数不建议放 data 里

<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>

<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>

2.事件修饰符

Vue中的事件修饰符：

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

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

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

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

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

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

<!-- 阻止默认事件（常用） -->
			<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

			<!-- 阻止事件冒泡（常用） -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
			</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是当前操作的元素时才触发事件； -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>

			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

修饰符可以连续写，既阻止了页面跳转又阻止了事件冒泡（哪一个行为在前就先执行哪一个）

<a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a>

3.键盘事件

（1）.Vue中常用的按键别名：

回车 => enter

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

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

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

<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">

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

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

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

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

<input type="text" placeholder="按下回车提示输入" @keydown.13="showInfo">

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

<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
    
<script>
Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
</script>

（6）.系统修饰键后面可再接需要操作的键盘

//只有当按下ctr+y是才会触发 showInfo()函数
<input type="text" placeholder="按下回车提示输入" @keyup.ctl.y="showInfo">

佩淇呢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue笔记（尚硅谷，笔记会续更）

尚硅谷Vue笔记
复制链接

扫一扫

专栏目录