Vue_day01

原创于 2022-10-31 19:40:29 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #前端框架

Vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了Web前端发展历程及Vue框架，指出Vue是目前国内占有率第一的前端框架，官方主推Vue3版本。详细阐述了使用Vue开发WEB应用的特点，包括插值语法、事件处理、元素属性动态绑定、动态修改类名和样式等，还提及了常见错误。

`Vue` `DAY01`

学习阶段：
Vue基础框架开发

Vue2组件库及项目

TS与面向对象

Vue3组件库及项目

`Vue`

Web开发三大框架之一。

Web前端的发展历程：

很早以前：HTML+CSS 静态页面。
JS：动态页面。操作DOM。
JQuery：利用JS语言的封装，简化DOM操作。
Angular：WEB前端三大框架之一 – 目前占有率极低。 MVVM模式。
React：2013年WEB前端三大框架之一 – 目前极其活跃。国外、1线城市。
Vue：2014年WEB前端三大框架之一 – 目前国内占有率第一。各线城市。

`Vue`

现阶段已经开发3个版本：

Vue1 淘汰
Vue2 过渡期逐步转向Vue3
Vue3 官方主推的版本，以后主流

Vue的官方文档：https://v2.cn.vuejs.org

Vue项目的开发方式：

脚本模式。类似jquery，引入一个vue.js文件来开发页面。
脚手架模式。生产场景中使用。适合工程化项目开发。

使用Vue开发WEB应用的特点

传统的DOM或JQuery的Web开发模式，如果需要更新DOM内容，则：

<div id="info">欢迎：<span id="name">张安</span></div>

$('#info').text('欢迎：李四')
$('#name').text('王五')

Vue的写法：

<div>欢迎：{{name}}</div>
<div>欢迎：{{name}}</div>
<div>欢迎：{{name}}</div>
<div>欢迎：{{name}}</div>
<div>欢迎：{{name}}</div>
<div>欢迎：{{name}}</div>

new Vue({
    data: {
        name: '李四'
    }
})

第一个Vue案例，写一个电影详情页。

实现步骤：

准备一个html页面，下载并引入vue.js。
编写代码，基于声明式语法完成一个电影详情页内容的展示。

以后传代码使用gitee，网址如下：

https://gitee.com/mingxuchn/code2207

`Vue`中的插值语法

{{js表达式}}

在js表达式中可以直接访问vue对象的属性，也可以进行数据的运算与方法的调用。

Vue在背后做了大量的工作，通过声明式语法使得数据与DOM建立关联后，所有的属性都是响应式的，当data中声明的属性有变化时，DOM将会自动更新，而不需要指定哪一个DOM元素需要更新。

`Vue`中的事件处理

`Vue`中如何为元素绑定事件

<div id="app">
	<!-- Vue1写法 -->
    <button v-on:click="clickMe()">点我换下一步电影</button>    
    <!-- Vue2 -->
    <button @click="clickMe">点我换下一步电影</button>    
    <button @click="clickMe()">点我换下一步电影</button>    
    <button @click="clickMe(10, 20)">点我换下一步电影</button>    
</div>

v-bind:属于vue绑定事件的相关指令，以为一旦用户点击了按钮，将会触发click事件，执行clickMe()方法，该方法需要在vue对象中声明：

new Vue({
    data: {},     // 声明Vue对象的属性
    methods: {    // 定义vue对象中的方法，这些方法可以被vue调用
        clickMe(){
            alert('点我触发clickMe')
        }
    }   
})

案例：测试vue中的事件绑定。

`this`

this的含义
函数()    调用全局函数的过程中见到this：     
    非严格：window
    严格：undefind
对象.方法()  调用对象的方法过程中见到this：
    对象本身
new  构造函数()   创建对象，执行构造函数时遇到了this:
    当前新创建的对象
箭头函数： 通过作用域链原则就近寻找this

new Vue()里，data中声明的属性，methods中声明的方法最终都会成为vue的成员。属于vue对象的一部分，所以在方法中可以通过this来访问data中声明的属性以及methods中声明的方法。

methods: {
	xxx(){},
    next(){
        this.moviename = ''  // 修改属性
        this.xxx()           // 调用方法
    }
}

`vue`中元素属性的动态绑定

需求：

<img src="./img/1.jpg">
<a href="https://www.baidu.com">点我去百度</a>
<button>下一张</button>

vue框架动态修改属性的设计：

<img v-bind:src="url">
<img :src="url">
<img :src="`./img/${num}.jpg`">

new Vue({
    data: {
        num:1, 
    	url: './img/1.jpg'   
    }
})

案例：动态修改图片地址。

结论

一旦为标签的属性添加了:（v-bind:），那么vue在解析该标签时，将会把该属性当做是动态属性，此时属性值双引号内的代码将被理解为js代码片段，这些js代码片段执行后的结果将会给属性赋值。

动态修改`Class`类名

例如：

<ul>
    <li :class="now==0?`active`:''">首页</li>
    <li>首页</li>
    <li>首页</li>
    <li>首页</li>
</ul>

new Vue({
    data: {
        now: 1,  // 表示当前选中项的下标
    }
})

案例：写一个导航。

在data中声明一个变量，vue可以通过该变量的值来动态设置标签class属性是否包含某一个类名：

<li :class="now==0?`active`:''">首页</li>
<!--通过对象的方式，来控制li标签的class属性是否包含某个类名 
    如果now==0返回true，意味着class="active" -->
<li :class="{active:now==0}">首页</li>

控制元素显示与隐藏：

<div v-show="boolean类型表达式"></div>

当vue在解析html时遇到v-show指令（Vue指令），就会将指令属性的属性值当做js代码段来解析，如果boolean类型表达式返回true，则显示当前元素，若返回false，则使当前元素隐藏。（底层：display:block display:none）。

动态修改标签的`style`

<button @click="n++">点我字体变大</button>
<p :style="`font-size:${n}px;`">你好，世界</p>
<p :style="{ 'font-size':n+'px' }">你好，世界2</p>
<p :style="{ fontSize:n+'px' }">你好，世界3</p>