vue快速入门基础知识教程

VUE是一套前端框架,免除了原生JavaScript中的DOM操作,简化书写。VUE基于MVVM(Model-View_ViewModel)思想,实现数据双向绑定。

Vue的核心库只关注图层.响应式数据绑定和组件化开发是其两大特点.
响应式数据绑定指的是vue.js会自动对页面中的某些数据的变化做出响应.(v-model指令可以实现数据的双向绑定)
组件化开发指的是vue.js通过组件,把一个单页应用中的各种模块拆分到一个个单独的组件(component)中,我们只要先在父级组件中写好各种组件标签,并且在组件标签中写好要传入组件的参数,然后在写好各种组件的实现,整个应用就可以完成了.

1 初识Vue

    想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
    demo容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
    demo容器里的代码被称为【Vue模板】
    Vue实例和容器是一一对应的
    真实开发中只有一个Vue实例,并且会配合着组件一起使用
    {{xxx}}是Vue的语法:插值表达式,{{xxx}}可以读取到data中的所有属性
    一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新(Vue实现的响应式)

    初始示例代码

<!-- 准备好一个容器 -->
<div id="demo">
	<h1>Hello,{{name.toUpperCase()}},{{address}}</h1>
</div>

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

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

</script>

2 模板语法

Vue模板语法有2大类:

    插值语法:

    功能:用于解析标签体内容

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

    指令语法:

    功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)

    举例:v-bind:href=“xxx” 或 简写为 :href=“xxx”,xxx同样要写js表达式,且可以直接读取到data中的所有属性

<div id="root">
	<h1>插值语法</h1>
	<h3>你好,{{name}}</h3>
	<hr/>
	<h1>指令语法</h1>
 <!-- 这里是展示被Vue指令绑定的属性,引号内写的是js表达式 -->
	<a :href="school.url.toUpperCase()" rel="external nofollow" x="hello">点我去{{school.name}}学习1</a>
	<a :href="school.url" rel="external nofollow" x="hello">点我去{{school.name}}学习2</a>
</div>

<script>
 new Vue({
	el:'#root',
	data:{
	name:'jack',
	school:{
	name:'百度',
	url:'http://www.baidu.com',
	}
 }
	})
</script>

3 数据绑定

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

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

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

        tips:

        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/>
 
 <!-- 简写 v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值-->
 单向数据绑定:<input type="text" :value="name"><br/>
 双向数据绑定:<input type="text" v-model="name"><br/>
</div>

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

4 事件处理

事件的基本使用:

  • 使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名
  • 事件的回调需要配置在methods对象中,最终会在vm上
  • methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象
<!-- 准备好一个容器-->
<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>
	const vm = new Vue({
 el:'#root',
 data:{
 name:'vue',
 },
 methods:{
 // 如果vue模板没有写event,会自动传 event 给函数
 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>

Vue中的事件修饰符

  • prevent:阻止默认事件(常用)
  • stop:阻止事件冒泡(常用)
  • once:事件只触发一次(常用)
<!-- 准备好一个容器-->
<div id="root">
 <h2>欢迎来到{{name}}学习</h2>
 <!-- 阻止默认事件(常用) -->
	<a href="http://www.baidu.com" rel="external nofollow" @click.prevent="showInfo">点我提示信息</a>
 <!-- 阻止事件冒泡(常用) -->
 <div class="demo1" @click="showInfo">
 <button @click.stop="showInfo">点我提示信息</button>
 <!-- 修饰符可以连续写 -->
 <!-- <a href="http://www.atguigu.com" rel="external nofollow" @click.prevent.stop="showInfo">点我提示信息</a> -->
 </div>
 <!-- 事件只触发一次(常用) -->
 <button @click.once="showInfo">点我提示信息</button>
</div>

5 键盘事件

键盘事件语法糖:@keydown,@keyup

Vue中常用的按键别名:

  • 回车 => enter
  • 删除 => delete
  • 退出 => esc
  • 空格 => space
  • 换行 => tab (特殊,必须配合keydown去使用)

<!-- 准备好一个容器-->
<div id="root">
 <h2>欢迎来到{{name}}学习</h2>
 <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
</div>

<script>
 new Vue({
 el:'#root',
 data:{
 name:'浙江理工大学'
 },
 methods: {
 showInfo(e){
 // console.log(e.key,e.keyCode)
 console.log(e.target.value)
 }
 },
 })
</script>

6 条件渲染

v-if

    写法:

    (1).v-if=“表达式”

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

    (3).v-else=“表达式”

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

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

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

<!-- 准备好一个容器-->
<div id="root">
 <!-- 使用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>哈哈</div>
 
 
 <!-- v-if与template的配合使用 -->
 <!-- 就不需要写好多个判断,写一个就行 -->
 <!-- 这里的思想就像事件代理的使用 -->
 <template v-if="n === 1">
 <h2>你好</h2>
 <h2>尚硅谷</h2>
 <h2>北京</h2>
 </template>
</div>

<script>
	const vm = new Vue({
 el:'#root',
 data:{
 styleArr:[
 {
 fontSize: '40px',
 color:'blue',
 },
 {
 backgroundColor:'gray'
 }
 ]
 }
 })
</script>

v-show

    写法:v-show=“表达式”
    适用于:切换频率较高的场景
    特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉(display:none)

    备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到

    v-if 是实打实地改变dom元素,v-show 是隐藏或显示dom元素

<!-- 准备好一个容器-->
<div id="root">
 <!-- 使用v-show做条件渲染 -->
 <h2 v-show="false">欢迎来到{{name}}</h2>
 <h2 v-show="1 === 1">欢迎来到{{name}}</h2>
</div>

7 列表渲染

v-for指令

  • 用于展示列表数据
  • 语法:v-for=“(item, index) in xxx” :key=“yyy”
  • 可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)
<div id="root">
 <!-- 遍历数组 -->
 <h2>人员列表(遍历数组)</h2>
 <ul>
 <li v-for="(p,index) of persons" :key="index">
 {{p.name}}-{{p.age}}
 </li>
 </ul>

 <!-- 遍历对象 -->
 <h2>汽车信息(遍历对象)</h2>
 <ul>
 <li v-for="(value,k) of car" :key="k">
 {{k}}-{{value}}
 </li>
 </ul>

 <!-- 遍历字符串 -->
 <h2>测试遍历字符串(用得少)</h2>
 <ul>
 <li v-for="(char,index) of str" :key="index">
 {{char}}-{{index}}
 </li>
 </ul>

 <!-- 遍历指定次数 -->
 <h2>测试遍历指定次数(用得少)</h2>
 <ul>
 <li v-for="(number,index) of 5" :key="index">
 {{index}}-{{number}}
 </li>
 </ul>
</div>

<script>
	const vm = new Vue({
 el:'#root',
 data: {
	persons: [
	{ id: '001', name: '张三', age: 18 },
	{ id: '002', name: '李四', age: 19 },
	{ id: '003', name: '王五', age: 20 }
	],
	car: {
	name: '奥迪A8',
	price: '70万',
	color: '黑色'
	},
	str: 'hello'
	}
 })
</script>

 8 生命周期

Vue 实例有一个完整的⽣命周期,也就是从new Vue()、初始化事件(.once事件)和生命周期、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等一系列过程,称这是Vue的生命周期。

beforeCreate(创建前):数据监测(getter和setter)和初始化事件还未开始,此时 data 的响应式追踪、event/watcher 都还没有被设置,也就是说不能访问到data、computed、watch、methods上的方法和数据。

created(创建后):实例创建完成,实例上配置的 options 包括 data、computed、watch、methods 等都配置完成,但是此时渲染得节点还未挂载到 DOM,所以不能访问到 $el属性。

beforeMount(挂载前):在挂载开始之前被调用,相关的render函数首次被调用。此阶段Vue开始解析模板,生成虚拟DOM存在内存中,还没有把虚拟DOM转换成真实DOM,插入页面中。所以网页不能显示解析好的内容。

mounted(挂载后):在el被新创建的 vm.$el(就是真实DOM的拷贝)替换,并挂载到实例上去之后调用(将内存中的虚拟DOM转为真实DOM,真实DOM插入页面)。此时页面中呈现的是经过Vue编译的DOM,这时在这个钩子函数中对DOM的操作可以有效,但要尽量避免。一般在这个阶段进行:开启定时器,发送网络请求,订阅消息,绑定自定义事件等等

beforeUpdate(更新前):响应式数据更新时调用,此时虽然响应式数据更新了,但是对应的真实 DOM 还没有被渲染(数据是新的,但页面是旧的,页面和数据没保持同步呢)。

updated(更新后) :在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时,组件 DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy(销毁前):实例销毁之前调用。这一步,实例仍然完全可用,this 仍能获取到实例。在这个阶段一般进行关闭定时器,取消订阅消息,解绑自定义事件。

destroyed(销毁后):实例销毁后调用,调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。

9 总结

作者:yin

%s 个评论

要回复文章请先登录注册