Vue基础学习笔记01

Vue.js

• 概要
  • 简单了解
  • Vue语法

1.简单认识

• vue是一个渐进式框架？了解就好
  • 意味着可以将vue作为应用的一部分嵌入其中
• vue的特点
  • 解耦视图和数据
  • 前端路由
  • 可复用组件
  • 状态管理
  • 虚拟DOM

2.Vue.js安装

1. 直接CDN引入

   <!-- 开发环境版本，包含了有帮助的命令行警告 --> 
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <!-- 生产环境版本，优化了尺寸和速度 -->
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
   
   

2. 下载后引入

3. NPM安装（后面讲到）

3.初体验

	<div id="app">{{message}}
        <ul>
				<li v-for="item in movies">{{item}}</li>
		</ul>

	<h2>{{count}}</h2>
    <button type="button" @click="add">+</button>
    <button type="button"  @click="sub">-</button>
    </div>
//数据和视图分离
	<script src="../js/vue.js"></script>
		<script>
			//let(ES6定义变量)/const(常量)
			let app=new Vue({
				el:'#app',//用于挂载要管理的元素
				data:{//定义数据
					message:'Hello Vue',
                    movies:['Hello','World','VUE']
				}，
                methods:{
					add:function(){
						console.log('add执行');
						this.count++;
					},
					sub:function(){
						console.log('sub执行');
						this.count--;
						
					}
				}
			});
		</script>

4.MVVM的概念

5.Vue生命周期

beforeCreate:function(){
console.log('xxx');
},
mounted:function(){
console.log('xxxs');
}//这是一些生命周期的回调函数 大概意思就是在创建vue对象时，执行到某一步骤就会回调一个函数

6.语法

6.1 插值操作

6.1.1 Mustache {{}}

• mustache语法中不仅可以直接协变量，还可以写简单的表达式，如：

• {{firstname+' '+lastname}}
  

6.1.2 v-once

• vue是响应式的，但有时候我们不想数据跟着变化，就用到v-once.

• <h2 v-once>{{message}}</h2>
  

6.1.3 v-html

• 如果我们直接通过{{}}来输出，会将HTML代码也一起输出

• <h2 v-html="url"></h2>
  

6.1.4 v-text

• 类似与{{}} ，但不同的是它不会先看到{{}}这个..但一般很少用..

• <h2 v-text="url"></h2>
  

6.1.5 v-pre

• v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法

• <p v-pre>{{message}}</p> //输出是{{message}}没有解析
  

6.1.6 v-cloak

• 防止闪烁..防止htlml先显示{{message}}之类的..
• 原理：写上个v-cloak属性，然后如果属性存在就display:none不显示，当vue解析完后就删除v-cloak这个属性

6.2 绑定属性

• 动态的绑定某一些属性的值，如a标签的href，img的src属性。

6.2.1 v-bind基本使用

简单使用:

	<div id="app">
			<a v-bind:href="ahref">百度</a>
	</div>		
    <script>	
        let app=new Vue({
            el:'#app',//用于挂载要管理的元素
            data:{//定义数据
                ahref:'http://www.baidu.com'
            }	
        });
    </script>
//简写 : <a :href="ahref">百度</a>

6.2.2 v-bind 对象语法

• ​ 对象语法的含义是:class后面跟的是一个对象

• 用法一：直接通过{}绑定一个类

• <h2 :class="{'active': isActive}">Hello World</h2>*
  

• 用法二：也可以通过判断，传入多个值

• <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
  

• 用法三：和普通的类同时存在，并不冲突

  注：如果isActive和isLine都为true，那么会有title/active/line三个类

  <h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
  

• 用法四：如果过于复杂，可以放在一个methods或者computed中,即调用一个方法，返回一个对象。

  注：classes是一个计算属性 后面才讲到

  <h2 class="title" :class="classes">Hello World</h2>
  

  简单例子：

		<div id="app" :class="{'red':isRed,'blod':isBlod}">  //<---看这里
			百度
		</div>
		<script>	
			let app=new Vue({
				el:'#app',
				data:{//定义数据
					isRed:true,
					isBlod:true
				}		
			});
		</script>

6.2.3 v-bind数组语法

注意：下面加单引号的是字符串不解析，如果不加单引号就是对应data里面的数据了。
用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

6.3 绑定样式

​ v-bind:style来绑定一些CSS内联样式。

6.3.1 对象语法

绑定方式一：对象语法
:style="{color: currentColor, fontSize: fontSize + 'px'}"
//style后面跟的是一个对象类型对象的
//key是CSS属性名称
//对象的value是具体赋的值，值可以来自于data中的属性

绑定方式二：数组语法  基本不用 
<div v-bind:style="[baseStyles, overridingStyles]"></div>
//style后面跟的是一个数组类型  baseStyles 是data的一个对象：以key:value..
//多个值以，分割即可

6.4 计算属性 computed

• n但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示，用到计算属性。

6.4.1 基本使用：

	<div id="app">{{fullName}}</div> //不用加（）
		<script>	
			let app=new Vue({
				el:'#app',
				data:{
					firstname:'Hello',
					lastname:' Vue'
				},
				//计算属性
				computed:{
					fullName:function(){//其实是个简写，详细看下面
						return this.firstname+ " "+this.lastname;
					}
				}
			});
		</script>

6.4.2 计算属性的setter、getter

//一般情况没有set方法，上面的是简写
computed:{
    fullName:{
        get:function(){
            return this.firstname+ " "+this.lastname;
        }
    }

使用set的情况：如果我在控制台修改：fuuName="xxx xxx"，默认会调用set方法。

6.4.3 计算属性的缓存

？ methods和computed 的区别

• 计算属性会进行缓存，如果多次使用时，计算属性只会调用一次 。（内容没修改的前提下）

6.5 事件监听

6.5.1 v-on基本使用

如点击事件：v-on:click=methodName“”

简写：@click

6.5.2 v-on参数

1. 如果方法不需要传参数，@click="name",可以不加()
2. 如果这样调用@click="name",但name的方法name(event)有参数，默认会传入事件对象
3. 如果要同时传入参数和event,通过$event传入事件

6.5.3 v-on修饰符

阻止冒泡等等。

在某些情况下，我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。

//停止冒泡
<button @click.stop="doThis"></button>
//阻止默认行为 如a的默认跳转或者表单的提交按钮等
<button @click.prevent></button>

<input @Keyup.13="onEnter"> //监听键盘抬起，.13修饰抬起哪一个键

6.6 条件判断

nv-if的原理：

pv-if后面的条件为false时，对应的元素以及其子元素不会渲染。

p也就是根本没有不会有对应的标签出现在DOM中。

6.6.1v-if v-else-if v-else

6.6.2 key 小问题

• 小问题：

如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。

但是按道理讲，我们应该切换到另外一个input元素中了。

在另一个input元素中，我们并没有输入内容。

为什么会出现这个问题呢？

问题解答：

这是因为Vue在进行DOM渲染时，出于性能考虑，（有个虚拟DOM）会尽可能的复用已经存在的元素，而不是重新创建新的元素。

在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。

解决方案：

如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key

并且我们需要保证key的不同 加一个key属性：key="name"

6.6.3 v-show

• v-if和v-show的区别
  • v-if为false 元素没有在DOM上
  • v-show为fase 时元素知识displat为none而已
• 用法
  • v-show="Boolean值 "

6.7 循环遍历

6.7.1 基本使用

 格式：v-for="item in items"
 遍历数组的过程中获取下标值：v-for="(item,index) in items" //注意 index是后面的

 遍历对象：
 //返回的是对象属性的值
 <ul><li v-for="item in info">{{item}}</li></ul>
 //遍历对象的值和键
 <ul><li v-for="(value,key) in info">{{value}}--{{key}}</li></ul>
 //遍历对象值和键还有下标  下标一般很少用
  <ul><li v-for="(value,key,index) in info">{{value}}--{{key}}</li></ul>
 data:{
     info{
         name:'whis',
         age:18,
         height:1.77
     }
 }

6.7.2 v-for key的属性使用 大致理解

视频的P37..

​ 官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。

​ 原因：看ppt..

7. ES6不完全学习

7.1 let/var

var没有块级作用域，会引起一些问题。比如这个：就需要闭包解决。

​ 块级作用域：let是有块级作用域的

7.2 const使用

标志一个常量，const定义时要赋值，且之后不能修改。

如果指向对象的话，意思是指向的对象不能变，但那个对象的属性可以修改。

7.3对象字面量增强写法

//对象字面量写法 不是用 const obj=new Object（）
const obj={
    name:'dong'
}
//ES5写法
const name='dong';
const obj={
    name:name
}
//ES6写法 会把上面的name作为名称，值作为value 相当于name='dong'
const obf={
    name //属性的增强写法
}
//注意是冒号，习惯性写成=号...
//函数的增强写法 以前是run:function(){}
const obj={
    run(){
        
    }
}
//TypeScript 有了类型检测..

8.检查数组更新

• vue是响应式的，当数据发生改变，Vue检测到data数据改变就会重新渲染dom。

• 但有些对数组的操作不一定式响应式的。

• Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
  push()//后面添加元素 可以添加多个  可变参数
  pop()//删除最后元素
  shift() //删除第一个
  unshift()//最前面添加元素 可以添加多个
  
  //可以删除、替换、增加
  splice()//参数 start  
  删除：arraynames.splice(1,3) //第二个参数删除个数
  替换：arraynames.splice(1,3,'M','N','F')；//第二个参数替换个数，替换从1开始的后三个
  插入：arraynames.splice(1,0,'M','N','F')；//插入元素..
  sort()//排序
  reverse()//倒转
  //还有一种修改的方法
  Vue.set(this.arraynames，0，’aa‘)；//是通过vue的内部实现的
  注意：
  这个：this.arraynames[0]='XXX'; //通过索引修改数组是没有响应式的。即数组内容改变了，但DOM不会刷新改变
  
  

我看的这个视频的网站：https://www.bilibili.com/video/av59594689