vue 非es6 写法怎么按须加载_前端基础之三 Vue框架基础（二）

最新推荐文章于 2023-01-03 17:05:12 发布

weixin_39843677

最新推荐文章于 2023-01-03 17:05:12 发布

阅读量149

点赞数

文章标签： vue 非es6 写法怎么按须加载 vue项目模板

本文主要包括以下5个内容

计算属性和侦听器
组件化基础
生命周期和钩子函数
Vue脚手架构建项目
分析脚手架加载流程并实战

1.计算属性和侦听器1)计算属性：模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。 使用方法：在 computed标签中指定需要动态计算属性的函数，如下例子中 totalPrice 计算数量*单价的总和。2)侦听器：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在 数据变化时执行异步或开销较大 的操作时，这个方式是 最有用 的。 使用方法：在 watch 标签中指定需要动态监听的值，如下例子中 xyjNum动态监听变化，用于提示库存是否充足。3)计算属性-vs-侦听属性： Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch ——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

   西游记；价格：{{xyjPrice}}，数量： 水浒传；价格：{{shzPrice}}，数量： 总价：{{totalPrice}} {{msg}}

   //watch可以让我们监控一个值的变化。从而做出相应的反应。 new Vue({ el: "#app", data: { xyjPrice: 99.98, shzPrice: 98.00, xyjNum: 1, shzNum: 1, msg: "" }, computed: { totalPrice(){ return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum } }, watch: { xyjNum(newVal,oldVal){ if(newVal>=3){ this.msg = "库存超出限制"; this.xyjNum = 3 }else{ this.msg = ""; } } }, })

2.组件化基础

在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航。·但是如果每个页面都独自开发,这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件,然后在不同页面就可以共享这些组件,避免重复开发。 使用方法：1)全局声明，如下代码中 < counter > 使用 Vue.component 声明2)局部声明，如下代码中 < button-counter > 使用函数直接定义

我被点击了 {{count}} 次

   //1、全局声明注册一个组件 Vue.component("counter", { template: `我被点击了 {{count}} 次`, data() { return { count: 1 } } }); //2、局部声明一个组件 const buttonCounter = { template: `我被点击了 {{count}} 次~~~`, data() { return { count: 1 } } }; new Vue({ el: "#app", data: { count: 1 }, components: { 'button-counter': buttonCounter } })

3.生命周期和钩子函数

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

编写代码测试声明周期

{{num}} 赞！

`{{name}}，有{{num}}个人点赞`

   let app = new Vue({ el: "#app", data: { name: "张三", num: 100 }, methods: { show() { return this.name; }, add() { this.num++; } }, beforeCreate() { console.log("=========beforeCreate============="); console.log("数据模型未加载：" + this.name, this.num); console.log("方法未加载：" + this.show()); console.log("html模板未加载：" + document.getElementById("num")); }, created: function () { console.log("=========created============="); console.log("数据模型已加载：" + this.name, this.num); console.log("方法已加载：" + this.show()); console.log("html模板已加载：" + document.getElementById("num")); console.log("html模板未渲染：" + document.getElementById("num").innerText); }, beforeMount() { console.log("=========beforeMount============="); console.log("html模板未渲染：" + document.getElementById("num").innerText); }, mounted() { console.log("=========mounted============="); console.log("html模板已渲染：" + document.getElementById("num").innerText); }, beforeUpdate() { console.log("=========beforeUpdate============="); console.log("数据模型已更新：" + this.num); console.log("html模板未更新：" + document.getElementById("num").innerText); }, updated() { console.log("=========updated============="); console.log("数据模型已更新：" + this.num); console.log("html模板已更新：" + document.getElementById("num").innerText); } });

结果如图所示：

4.Vue脚手架构建项目

1)npm install webpack -g 全局安装webpack

2)npm install -g @vue/cli-init 全局安装vue 脚手架

3)初始化项目 vue init webpack vue-demo

如遇到：vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，

然后再试一次。

参考：http://www.bubuko.com/infodetail-3613236.html

配置环境变量

4)启动项目

项目package.json 中有scripts ，代表我们能运行的命令

npm start = npm run dev 启动项目

访问：http://localhost:8080/#/

5)目录结构介绍

build 打包有关代码

config 配置有关代码，比如修改index.js 里面的port 修改启动端口

node_modules 引入的所有依赖

src 就是代码文件夹

static 就是存放静态资源文件的目录

.babelrc 是语法转义的配置文件

index.html 是首页的内容

package.json 是依赖包的配置信息

5.分析脚手架加载流程并实战

1)查看页面是怎么被加载出来的

查看 index.html 只有一个

<html>  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,initial-scale=1.0">    <title>vue-demotitle>  head>  <body>    <div id="app">div>      body>html>

点击进入src 的main.js 目录创建了vue 实例，通过el: '#app' 绑定了index.html 中的 router, 导入了import router from './router' 路由，然后添加到了 Vue 实例中，是es6的简写写法全写应该为router: router components: { App },导入了 ./App 组件是es6的简写写法全写应该为router: router components: { App ：App} template: '' 在模板中使用了刚导入的组件App

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  components: { App },  template: ''})

我们可以看到 ./router 文件，导出了一个没有指定名字的对象数组

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

查看App.vue 文件

可以看到有