类别:前端知识

日期:2023-02-10 浏览:1497 评论:0

9d19cfa4e2e8dafb7706170a35d7de1c.png

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-color:rgb(144 255 173)">else和v-color:rgb(144 255 173)">else-if -->
    <div v-if="n === 1">Angular</div>
    <div v-color:rgb(144 255 173)">else-if="n === 2">React</div>
    <div v-color:rgb(144 255 173)">else-if="n === 3">Vue</div>
    <div v-color:rgb(144 255 173)">else>哈哈</div>
    
    
    <!-- v-if与template的配合使用 -->
    <!-- 就不需要写好多个判断,写一个就行 -->
    <!-- 这里的思想就像事件代理的使用 -->
    <template v-if="n === 1">
        <h2>你好</h2>
        <h2>尚硅谷</h2>
        <h2>北京</h2>
    </template>
</div>

<script>
	const vm = new Vue({
        color:rgb(144 255 173)">el:'#root',
        color:rgb(73 238 255)">data:{
            color:rgb(98 189 255)">styleArr:[
                {
                    color:rgb(98 189 255)">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 color:rgb(144 255 173)">id="root">
    <!-- 遍历数组 -->
    <h2>人员列表(遍历数组)</h2>
    <ul>
        <li v-for="(p,index) of color:rgb(253 97 106)">persons" :key="index">
            {{p.color:rgb(73 238 255)">name}}-{{p.color:rgb(255 111 119)">age}}
        </li>
    </ul>

    <!-- 遍历对象 -->
    <h2>汽车信息(遍历对象)</h2>
    <ul>
        <li v-for="(value,k) of color:rgb(255 111 119)">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({
        color:rgb(144 255 173)">el:'#root',
        color:rgb(73 238 255)">data: {
			color:rgb(253 97 106)">persons: [
				{ color:rgb(144 255 173)">id: '001', color:rgb(73 238 255)">name: '张三', color:rgb(255 111 119)">age: 18 },
				{ color:rgb(144 255 173)">id: '002', color:rgb(73 238 255)">name: '李四', color:rgb(255 111 119)">age: 19 },
				{ color:rgb(144 255 173)">id: '003', color:rgb(73 238 255)">name: '王五', color:rgb(255 111 119)">age: 20 }
			],
			color:rgb(255 111 119)">car: {
				color:rgb(73 238 255)">name: '奥迪A8',
				color:rgb(255 95 0)">price: '70万',
				color: '黑色'
			},
			str: 'hcolor:rgb(144 255 173)">ello'
		}
    })
</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 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。


本文标题:vue快速入门基础知识教程
本文链接:https://vtzw.com/post/1081.html
作者授权:除特别说明外,本文由 零一 原创编译并授权 零一的世界 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。
 您阅读本篇文章共花了: 

 可能感兴趣的文章

评论区

发表评论 / 取消回复

必填

选填

选填

◎欢迎讨论,请在这里发表您的看法及观点。