vue.js基础

最新推荐文章于 2023-02-21 22:11:12 发布

水工.

最新推荐文章于 2023-02-21 22:11:12 发布

阅读量267

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_65291134/article/details/127164991

版权

一、vue概念

Vue是构建Web界面的JavaScript库，原称为Vue.js，它可以通过简洁的API来提供高效的数据绑定和灵活的组件系统。它提供了现代Web开发中常用的高级功能，解耦视图和数据、可复用的组件、数据绑定、功能插件化、虚拟DOM（Virtual DOM）。

二、vue的下载

1.. 直接用 script标签引入

要在现有站点中使用 Vue，可以通过<script>元素在页面中使用。

点击前往官网下载安装 — Vue.js

<script src="vue.js"></script>

2.使用CDN引入

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

三、脚手架

代码中，一个网站、app项目也要使用脚手架进行搭建，使用脚手架可以快速搭建一个vue项目。使用上，脚手架就是一个node.js模块，使用npm下载安装后结合webpack打包工具可快速生成一个vue项目架构。

四、路由

1.概念

一个路由就是一组映射关系（key - value），key 为路径, value 可能是 function 或 component。前端路由的value 是 component（组件），用于展示页面内容，当浏览器的key(路径)改变时, 对应的组件即页面内容就会相应改变进行页面显示。

路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用。Vue.js 路由需要载入 vue-router 库

Vue.js + vue-router 可以很简单的实现单页应用。

2.Vue Router 基本使用

Vue Router：Vue.js官方提供了一套专用的路由工具库Vue Router。由于Vue Router是Vue的一个插件，需要在Vue的全局应用中通过Vue.use( )将它纳入Vue实例中。

2.1 建立路由器模块
在vue-cli创建的项目中，router文件夹下的index.js中配置和绑定相关信息。new Router命令创建一个路由对象，一条路由的实现需要三个部分：name（路由名字），path（路径），component（组件）。

import Vue from 'vue'
import Router from 'vue-router'
//将HelloWorld组件引入
import HelloWorld from '@/components/HelloWorld' 
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

2.2 启动路由器

2.3 路由重定向

项目应用中通常都有一个首页，默认首先打开的是首页，目前我们默认首先打开的地址是http://localhost:8080/#/我们想要改变这个默认地址，让它默认打开的是首页，http://localhost:8080/#/home，我们可以使用路由重定向完成。

export default new Router({
  routes: [
    {
      path:'/',
     //路由重定向第一种方式
      redirect:'/home'
     //路由重定向第二种方式
      // redirect:{name:'Home'}
      //路由重定向第三种方式
      // redirect:to=>{return 'Home';}
    },
    {
      path:'/home',
      name:'Home',
      component:Home
    },

2.4 路由懒加载

路由懒加载方式：能把不同路由对应的组件分割成不同的代码块，当路由被访问时才加载对应路由，比较高效。语法（例如加载School路由组件）：

const School=()=>import('../components/School.vue')

2.5 <router-link> 属性详解

<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的 <a> 标签在页面显示。

to 属性：类型string/location

表示目标路由的链接，该值可以是一个字符串，也可以是动态绑定的描述目标位置的对象。建议用字符串写法，很简单方便。

<!-- 字符串 -->
<router-link to="/home">Home</router-link>
<!-- 渲染结果 -->
<a href="/home">Home</a>
 
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'/home'">Home</router-link>
 
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'/home'">Home</router-link>
 
<!-- 同上 -->
<router-link :to="{ path: '/home' }">Home</router-link>
 
<!-- 同上 -->
<router-link :to="{ name: 'Home' }">Home</router-link>

五、语法

Vue.js的指令是以v-开头的

1.v-if:
v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：
v-if="expression",expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。
2.v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。
3.v-else指令
可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。
4.v-for指令
v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：
v-for="item in items",items是一个数组，item是当前被遍历的数组元素。
5.v-bind指令
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class v-bind:argument="expression"
6.v-on指令
v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：
7.v-bind和v-on的缩写
Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。

5.1 v-on 指令

v-on 指令监听 DOM 事件
v-on 指令可以缩写为 @ 符号
v-on 指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件。

如果是点击事件就写click，如果是鼠标移入事件就写monseenter，如果是鼠标双击事件就写 dblclick v-on:click

<div id="hello">
      <!-- v-on 指令可以缩写为 @ 符号 -->
      <button @click="counter += 1">增加 1</button>
      <p>这个按钮被点击了 {{ counter }} 次。</p>
      <!-- 接收一个定义的方法来调用 -->
      <!-- `greet` 是在下面定义的方法名 -->
      <button @click="greet">点我</button>
      <!-- 用内联 JavaScript 语句 -->
      <button @click="say('hi')">Say hi</button>
      <!-- 事件处理程序中可以有多个方法，这些方法由逗号运算符分隔 -->
      <button @click="one($event), two($event)">点我</button>
    </div>
    
    <script>
    const helloworld = {
      data() {
        return {
          counter: 0,  
          name: 'Runoob'        
        }          
      },
      methods: {
        greet(event) {
          // `methods` 内部的 `this` 指向当前活动实例
          alert('Hello ' + this.name + '!')
          // `event` 是原生 DOM event
          if (event) {
            alert(event.target.tagName)
          }
        },
        say(message) {
          alert(message)
        },
        one(event) {
          alert("第一个事件处理器逻辑...")
        },
        two(event) {
          alert("第二个事件处理器逻辑...")
        }
      }
    }    
    Vue.createApp(helloworld).mount('#hello')
    </script>

事件修饰符
v-on 提供了事件修饰符来处理 DOM 事件细节
.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件

5.2 v-bind 指令

在需要动态绑定的属性前面加上v-bind就会自动去vue实例里面去找当前的属性去进行设置
表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找,当然也可以等于一个常数，这样就不用去data里找了。

5.3 v-model 指令

v-model 相当于 v-on 和 v-bind

v-model 会根据控件类型自动选取正确的方法来更新元素。
v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

select ：使用 value 属性和 change 事件。
text 和 textarea ：使用 value 属性和 input 事件；
checkbox 和 radio ：使用 checked 属性和 change 事件；

六、样式绑定

6.1 class

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性

class 指令也可以与普通的 class 属性共存。
在带有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖
如果你的组件有多个根元素，你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作

6.2 style

    <div id="hello">
      <!-- 在 v-bind:style 直接设置样式，可以简写为 :style： -->
      <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">111</div>
      <!-- 直接绑定到一个样式对象，让模板更清晰： -->
      <div :style="styleObject">222</div>
      <!-- v-bind:style 可以使用数组将多个样式对象应用到一个元素上： -->
      <div :style="[baseStyles, overridingStyles]">333</div>
      <!-- 可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，
           这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。 -->
      <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
    </div>
    
    <script>
    const helloworld = {
      data() {
        return {
          activeColor: 'red',
			    fontSize: 30,
          styleObject: {
            color: "red",
            fontSize: "30px"
          },
          baseStyles: {
            color: 'green',
            fontSize: '30px'
          },
	        overridingStyles: {
            'font-weight': 'bold'
          }
        }
      }
    }
     
    Vue.createApp(helloworld).mount('#hello')
    </script>

七条件语句

7.1 `v-if`指令

在html标签中使用v-if=" "，Vue会对" "(引号)中的内容进行计算，并通过计算结果，判断标签内容是否可见

<div id="app">
    <p v-if="seen">hello!</p>
    <button @click="seen = !seen">点击按钮显示或隐藏"hello!"</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            seen: true
        }
    })
</script>

在上述实例中：

通过<button>来控制seen的属性值

v-if 指令根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

7.2 `v-else`指令

我们可在拥有v-if或v-else-if指令的html元素后，紧跟一个带有v-else的元素。用作 v-if 的 “else” 块

<div id="app">
    <p v-if="seen">true</p>
    <p v-else>false</p>
    <button @click="seen = !seen">点击按钮切换显示标签"</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            seen: true
        }
    })
</script>

7.3 `v-else-if`指令

我们可在拥有v-if或v-else-if指令的html元素后，紧跟一个带有v-else-if的元素。用作 v-if 的 “else-if” 块。可以链式的多次使用

<div id="app">
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            type: 'C'
        }
    })
</script>

注意： v-else 、v-else-if 必须跟在 v-if 或者 v-else-if 之后。

7.4 、`v-show`指令

我们也可以使用 v-show 指令来根据条件展示元素：

Vue会对v-show = " "中的内容进行运算，若得出的结果为true则进行显示，若为false则不显示

<div id="app">
    <p v-show="seen">hello!</p>
    <button @click="seen = !seen">点击按钮显示或隐藏"hello!"</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            seen: true
        }
    })
</script>

八、循环语句

8.1 Vue.js 循环语句

循环语句需要使用到v-for指令，它是一种site in site形式的特殊语法。sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以通过绑定数据的方式到数组里去渲染一个列表：

    <div id="app">
        <ol>
          <li v-for="site in sites">
            {{ site.name }}
          </li>
        </ol>
      </div>
       
      <script>
      new Vue({
        el: '#app',
        data: {
          sites: [
            { name: '中亿丰数字' },
            { name: '数字中台' },
            { name: '研发部' }
          ]
        }
      })
      </script>

8.2 v-for 迭代对象

    <div id="app">
        <ul>
          <li v-for="value in object">
          {{ value }}
          </li>
        </ul>
      </div>
       
      <script>
      new Vue({
        el: '#app',
        data: {
          object: {
            name: '中亿丰数字产品dtcloud',
            url: 'http://dtcloud360.com/',
            slogan: '智能建筑，数字物联。'
          }
        }
      })
      </script>