Vue前端框架

举目沧桑

已于 2022-04-14 09:48:51 修改

阅读量8.6k

点赞数 33

分类专栏：前端文章标签：前端框架 vue.js 前端

于 2022-02-28 09:38:54 首次发布

本文链接：https://blog.csdn.net/wu246051/article/details/123060620

版权

前端专栏收录该内容

3 篇文章 3 订阅

订阅专栏

Web应用分类：

1.传统Web页面
2.单页应用

1.传统Web页面

1.H5（不等同于HTML5）

一般称之为H5页面（营销页面）
即：在传统的平面海报中增加交互体验和数据存储，用于营销推广和数据信息收集等

2.传统技术特点：

.单击某个链接，按钮或提交表单后，页面整体刷新

3.传统技术缺点：

1.每次页面整体刷新，都要导致浏览器重新加载对应的内容
2.加载内容繁多，传统页面的css/js多达上百个，每次打开页面都需要发送上百次请求，卡顿现象严重

2.单页应用（Single Page App,SPA）

1.整个应用只有一个主页面，其余的“页面”，实际上是一个个的“组件”
2.单页应用中的“页面跳转”，实际上是组件的切换，在这个过程中，只会更新局部资源，页面不会整个刷新（正是因为这个原因，当我们的前端代码有更改，重新部署之后，如果用户不主动刷新，就会发现有“资源缓存”）

1.单页应用特点

1.页面是局部刷新的，响应速度快，不需要每次加载所有的资源
2.前后端分离，前端不受后端的限制

2.单页应用框架

1.Angular

1.特点

1.业内第一个SPA框架
2.实现了前端的MVC解耦
3.双向绑定，Model层的数据变化会直接影响View,反之亦然

2.缺点

不易学习，文档差

2.React

1.特点

1.使用js一种语言就可以写前端(H5)+后端
2.React Native可以直接运行在手机端，性能接近原生APP
3.可使用组件多

2.缺点

1.html代码需要写在js文件中，前后端代码写在一起的风格
2.多语言混合式编程，代码难以理解，开发和调试

3.Vue

1.特点

1.基于MVVM（Model-View-ModelView）的SPA框架
View：视图
Model：数据
ModelView：连接View与Model的纽带

2.Vue.js和微信小程序，阿里巴巴的Weex相似

3.Ajax和XML

1.概述

1.Ajax（Asynchronous JavaScript And XML）：异步js与XML
2.Ajax名称本意是：异步js与XML，但是现在服务器端返回的数据几乎都使用JSON，而抛弃了XML
3.Ajax每次打开新的网页时，页面不会整体刷新，而是由js发起一个HTTP异步请求

2.特点

1.节省页面加载时间
2.节省了带宽
3.减轻客户端和服务器端的负担

Vue

Vue (读音类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架

1.构建用户界面：将数据通过某种方式展示到前端页面
2.渐进式：Vue可以自底向上逐层的应用，由浅入深，由简单到复杂（即：如果简单应用只需要引入一个轻量小巧的核心库，复杂应用可以根据需要引入各式各样的Vue插件，从一个轻量小巧的核心库逐渐递进到各式各样的Vue插件库）

简介

1.尤雨溪开发的一款轻量级框架
2.2015年正式发布Vue1.0.0
3.2016年正式发布Vue2.0.0
4.2020年正式发布Vue3.0.0

特点

1.采用组件化模式，提高代码复用率，且让代码更好维护

2.声明式编码，无需直接操作DOM，提高开发效率

//命令式编码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>原生JavaScript</title>
	</head>
	<body>
		<ul id="list"></ul>
		<script type="text/javascript">
			// 需要展示的数据
			let persons = [
				{id: '001',name: '张三', age: 18},
				{id: '002',name: '李四', age: 19},
				{id: '003',name: '王五', age: 20},
			]
			
			//准备html字符串
			let htmlStr = ''
			
			//遍历数据拼接html字符串
			persons.forEach( p => {
				htmlStr += `<li>${p.id} - ${p.name} - ${p.age}</li>`
			})
			
			//获取list元素
			let list = document.getElementById('list')
			
			//操作DOM修改内容
			list.innerHTML = htmlStr
		</script>
	</body>
</html>

// 声明式编码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul id="list">
				<li v-for="p in persons">
					{{p.id}} - {{p.name}} - {{p.age}}
				</li>
			</ul>
		</div>
		<script>
			new Vue({
				el: "#app",
				// data: function(){
				// 	return {
				// 		persons : [
				// 			{id: '001',name: '张三', age: 18},
				// 			{id: '002',name: '李四', age: 19},
				// 			{id: '003',name: '王五', age: 20},
				// 		]
				// 	}
				// }
				data: {
					persons : [
						{id: '001',name: '张三', age: 18},
						{id: '002',name: '李四', age: 19},
						{id: '003',name: '王五', age: 20},
					]
				}
			})
		</script>
	</body>
</html>

3.使用虚拟DOM+Diff算法，尽可能复用DOM节点

说明：
- 通过Diff算法比较，新数据和旧数据的区别，相同的复用，不同的修改
4.体积小：压缩后33k
5.双向数据绑定

扩展1：Diff算法

概念：
Diff算法是一种优化手段，将前后两个模块进行差异化对比，修补（更新）差异的过程叫做patch (打补丁)
意义：
vue,react框架中都有diff算法
因为操作真实dom的开销很大，某些时候修改了页面中的某个数据，如果直接渲染到真实DOM中会引起整棵树的重绘，只让我们改变过的数据映射到真实 DOM,做最少的重绘，这就是diff算法要解决的事情
virtual DOM和真实DOM的区别：
virtual DOM是将真实的 DOM 的数据抽取出来，以对象的形式模拟树形结构，diff算法比较的也是virtual DOM 代码理解

1.原生Vue

独立的Vue框架，不与Webpack等框架结合使用

1.安装与部署

1安装方式

1.直接通过<script></script>标签引入
1.通过src引入本地文件
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
说明：
1.引入Vue.js后，Vue会被注册成一个全局变量，通过操作这个函数可以进行后续的操作
2.通过src引入在线文件（使用CDN加速）
开发版本
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
生产版本
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
模板库引入(暂时未用到)
<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
</script>

2.通过NPM命令行工具下载安装

2.引入类型

3.例子
1.在head中引入vue.js包
2.在body中定义一个<div id='app'></div>
3.所有的页面都是展示在这个<div id='app'></div>中，每次改变不会全局刷新，而是通过Vue.js框架操作代码，对其中内容进行局部刷新
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue测试</title>
		<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
		
	</head>
	<body>
		<div id="app">
			{{hello}}
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					hello: "Hello World! This is my first test"
				}
			})
		</script>
	</body>
</html>
4.控制台上出现下列语句即表示成功

3.Webpack+Vue.js开发

1.概述

1.大部分Vue.js项目都是在Webpack的框架下进行开发的
2.vue-cli直接把Webpack做了集成

NVM(Node Version Manager)

Node版本管理工具
不同Node版本可能出现冲突
需要在同一台机器上同时安装多个版本的Node,NVM可以帮我们解决这个问题
Windows下的NVM官方网址http://nvm.uihtm.com

NPM(Node Package Manager)

只要安装了node，就会捆绑安装该命令，它的作用与Ruby中的bundler以及Java中的maven相同，都是对第三方依赖进行管理

Webpack
随着SPA(Single Page App)单页应用的发展，js/css/png文件特别多，难以管理，文件夹结构也容易混乱
希望项目可以具备压缩css,js，正切处理各种js/css的import,以及相关模板的html文件
Webpack是一个打包工具，可以吧js，css，node，module,coffeescrip,scss/less,图片等都打包在一起
实际开发中，都是统一使用Webpack+Vue.js的方式来做项目,这样才可以做到视图，路由,component等的分离,以及快速打包,部署和项目上线
1.Webpack安装与使用
npm install --save webpack
Webpack自身是支持Vue.js的，所以Webpack与Vue.js已经结合到很难分清楚谁是谁
只需要知道做什么事运行什么命令就行

总体来说只要能安装上Node和Vue.js就可以
安装Vue.js
2.需要同时安装vue和vue-cli这两个node package

npm install vue vue-cli -g

-g表示这个包安装后可以被全局使用
安装后注意配置环境变量
找到vue.cmd的文件路径配置
F:\Node\NodeJs\node_global
运行vue
3.创建一个基于Webpack模板的新项目
vue init webpack my-project
使用Vue都是在Webpack前提下使用的
安装所需要的依赖
cd my-project
cnpm/npm install
启动项目
npm run dev
或 npm start
两则没什么区别，当运行npm run dev时，系统会进入到package.json文件中运行scripts中对应的脚本，可以看到start,对应的也是 npm run dev

在这里插入图片描述

在使用vue init webpack myproject后会生成一个崭新的项目，文件结构如上
build：编译用到的脚本
在这里插入图片描述
build.js：打包使用，不能修改
check-version.js：检查npm的版本，不能修改
utils.js：不能修改，做一些css/sass等文件的生成
vue-loader.conf.js：非常重要的配置文件，不能修改。内容是用于辅助加载Vue.js用到的css source map等
webpack.base.conf.js
webpack.dev.conf.js
webpack.prod.conf.js都是基本的配置文件，不能修改

config：各种配置
在这里插入图片描述
dev.env.js：开发模式下的配置文件，一般不用修改
prod.env.js：生产模式下的配置文件，一般不用修改
index.js：很重要的文件，定义了开发时的端口（默认8080），图片文件夹（默认static），开发模式下的代理服务器

dist：打包后的文件夹
node_modules：node第三方包
在这里插入图片描述
node项目所用到的带三方包特别多，也特别大，这个文件是由命令npm install产生的，所有在package.json中定义的第三方包都会被自动下载，保存在该文件夹下
注意，这个文件夹不能放在git中

src：源代码
在这里插入图片描述
assets：文件夹用到的图片都可以放到这里

components：用到的视图和组件所在的文件夹（核心）

router：路由

index.js是路由文件，定义了各个页面对应的url

App.vue：
如果说index.html是一级页面模块的话，App.vue就是二级页面模板，所有其他的Vue.js页面都作为该模板的一部分被渲染出来

main.js：没有实际的业务逻辑，但是为了支持整个Vue.js框架，很有必要存在

static：静态文件
在这里插入图片描述

index.html：最外层文件
在这里插入图片描述

package.json：node项目配置文件

在这里插入图片描述

4.Webpack+Vue.js实战

在Vue.js中创建页面需要以下两步
1.新建路由

默认的路由文件是src/router/index.js，将其打开后，增加两行
import SayHello from '@/components/SayHello.vue’表示从当前目录下的components引入SayHello文件，其中@表示当前目录
然后定义路由,其中path表示对应的一个url,name表示Vue.js内部使用的名称,component表示对应的.vue页面的名字，即：每当用户访问http://localhost:8080/#/say_hello时，文件就会渲染./components/SayHello.vue文件,name：'SayHello’定义了该路由在Vue.js内部的名称，其中当path为/表示默然访问该页面

2.新建vue页面

<template></template>代码块中表示的是HTML模板，里面写的是最普通的HTML
<script></script>表示的是js代码，所有的js代码都写在这里，这里使用的是EMScript
<style></style>表示所有的CSS/SCSS/SASS文件都写在这里

定义并显示变量
如果要在vue页面中定义一个变量，并显示出现，就需要事先在data中定义
通过对于与原生Vue的区别可以看出之前原生的代码中存在于new Vue({})中的代码，在Webpack框架下，都应该放到export default{}中

let，var，常量与全局变量
声明本地变量，使用let或var
区别：
var：有可能引起变量提升，或者块级作用域问题
let：就是为了解决以上两个问题存在的
所以多用let,少用var
在Webpack下的Vue.js中使用任何变量都需要使用var或let声明变量

常量：
const修饰

全局变量：
直接在index.html中声明即可
例
window.title = ‘我的博客’

导入代码
import用于导入外部代码
import Vue from ‘vue’
由于vue是在package.json中定义的，因此可以直接import … form 包名，否则要加上路径

import SayHello from ‘@/components/SayHello’
在from后面添加@符号，表示是在本地文件系统中引入文件，@代表源代码目录，一般是src,也可以表示当前文件根目录
@出现之前也会使用
import SayHello from ‘…/components/SayHello’
如果大量使用…/…入引起混乱，所以推荐使用@方法

方便其他代码使用自己：export default{…}
每个vue文件的

假设有lib/math.js文件

export function sum(x, y) {
	return x + y
}
export var pi = 3.14

lib/math.js文件可以导出两个内容，一个是function sum，另一个是var pi
定义一个新的文件：app.js

import * as math form "lib/math"
alert("2π =" + math.sum(math.pi,math.pi))

上面的代码中，可直接调用math.sum和math.pi方法
或

import {sum, pi} from "lib/math"
alert("2π =" + sum(pi, pi))

可以直接调用sum()和pi

而export default {…}则是暴露出一段没有名字的代码，不像上述有名字而已
在Webpack下的Vue.js，会自动对这些代码进行处理，属于框架内的工作

ES中的简写

<script>
export default {
	data () {
		return {}
	}
}
</script>
实际上是下面的简写形式
<script>
export default {
	data：function() {
		return {}
	}
}
</script>

箭头函数
与coffeescript一样，ES也可以通过箭头表示函数

.then(response => {})
等同于
.then(function(response) {
	...
})

这样写的好处是强制定义了作用域，使用=>之后，可以避免很多由作用域产生问题

hash中同名的key,value的简写

let title = 'body'
return {
	title: title
}
等同于
let title = 'body'
return {
	title
}

分号可以省略
var a = 1;
等同于
var a = 1

Vue.js渲染页面的过程和原理
只有知道页面是如何被渲染出来的，才能更好的理解框架和调试代码

渲染过程
首先需要知道./build/webpack.base.conf.js是webpack打包的主要配置文件

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}



module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

1.js入口文件
其中app: './src/main.js’定义了Vue.js的入口文件

module.exports = {
  ...
  entry: {
    app: './src/main.js'	//定义了Vue.js的入口文件
  },
  ...

2.渲染过程2：静态的HTML页面（index.html）
每次打开的页面是http://localhost/#/
实际上打开的文件是http://localhost/#/index.html

在这里插入图片描述
这里的

就是将来会动态变化的内容
index.html文件是最外层的模板

3.渲染过程3：main.js中的Vue定义
src/main.js
在这里插入图片描述

new Vue({
  el: '#app', // 这里的#app对应index.html中的<div id=app></div>
  router,
  components: { App },
  template: '<App/>' // 这里，App就是./src/App.vue
})

上面的App.vue会被main.js加载
在这里插入图片描述

上面代码中的就是第二层模板，可以认为该页面的内容就是在这个位置被渲染出来的
在上面代码中<div id='app'>...</div>，该元素与index.html中的是同一个元素
所有的中的内容都会被自动替换，<script>中的代码这是脚本代码

渲染原理与实例
Vue.js就是最典型的Ajax工作方式，即只渲染部分页面，不会整体刷新，
浏览器的页面从来不会整体刷新，所有的页面变化都限定在index.html中的<div id='app'></div>代码中
所有的动作都可以靠url来触发
这个技术是靠Vue.js的核心组件vue-router来实现的
不使用router的技术：QQ邮箱，QQ邮箱是属于url无法与某个页面一一对应的项目，所有页面的跳转都无法根据url来判断
最大的特点是不能保存页面的状态，难以调试，无法根据url进入某个页面

视图中的渲染

渲染某个变量
假设定义了一个变量
可以这样来显示它：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ test }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      test: '变量渲染成功！'
    }
  }
}
</script>

方法的声明和调用
声明一个show-my-value方法
并调用
对于有参数的方法，直接传递参数即可

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ test }}</h1>
    <input type="button" @click="say_hi('李四')" value="点击"/>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      test: '变量渲染成功！'
    }
  },
  methods: {
    say_hi: function(name){
      alert("Hi,"+name)
    }
  }
}
</script>

在这里插入图片描述

事件处理

v-on
很多时候@click等同于v-on:click

视图中的Directive(指令)
Vue.js是一种javascript框架，只能与标签结合使用，叫做Directive（指令)
v-on,v-bind,v-if,v-for等，只要以v开头，都是Directive
原理：
1.用户在浏览器中输入网址，按回车键
2.浏览器加载所有资源(js,html内容)，此时尚未解析
3.浏览器加载Vue.js
4.Vue.js程序被执行，发现页面中的Directive并进行相关的解析
5.HTML中的内容被替换，展现给用户

前提，在directive中使用表达式
表达式：a>1 有效
普通语句：a=1;(这个是声明，不会有效)
控制语句：return a；（不会生效）

在所有的Directive中，只能使用表达式

循环： v-for

<template>
  <div class="hello">
    <ul>
      <li v-for="name in names">
        {{name}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      names: ["李四", "王五", "赵六"]
    }
  },
}
</script>

在这里插入图片描述
判断： v-if
条件Directive是由v-if , v-else-if, v-else配合完成

<template>
  <div class="hello">
    <p>选择姓名：</p>
      <div v-if="name === '王五'">王五</div>
      <div v-else-if="name === '赵六'">赵六</div>
      <div v-else="name === '李四'">李四</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      name: '赵六'
    }
  },
}
</script>

注意，v-if后面的引号中是===，

===是Ecmascript的语言，表示严格判断，因为js的 == 有先天缺陷，一般都是使用三个等号的形式

这里是引用

var num = 1; 
   
var str = '1'; 
   
var test = 1; 
   
test == num  //true　相同类型　相同值 
   
test === num //true　相同类型　相同值 
   
test !== num //false test与num类型相同，其值也相同,　非运算肯定是false 
   
num == str  //true 　把str转换为数字，检查其是否相等。 
   
num != str  //false == 的 非运算 
   
num === str //false 类型不同，直接返回false 
   
num !== str //true  num 与 str类型不同 意味着其两者不等　非运算自然是true啦
== 和 != 比较若类型不同，先偿试转换类型，再作值比较，最后返回值比较结果 。

而

=== 和 !== 只有在相同类型下,才会比较其值。
 
首先，== equality 等同，=== identity 恒等。

==， 两边值类型不同的时候，要先进行类型转换，再比较。

===，不做类型转换，类型不同的一定不等。

下面分别说明：

先说 ===，这个比较简单。下面的规则用来判断两个值是否===相等：

1、如果类型不同，就[不相等]

2、如果两个都是数值，并且是同一个值，那么[相等]；(！例外)的是，如果其中至少一个是NaN，那么[不相等]。（判断一个值是否是NaN，只能用isNaN()来判断）

3、如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。

4、如果两个值都是true，或者都是false，那么[相等]。

5、如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。

6、如果两个值都是null，或者都是undefined，那么[相等]。

再说 ==，根据以下规则：

1、如果两个值类型相同，进行 === 比较。

2、如果两个值类型不同，他们可能相等。根据下面规则进行类型转换再比较：

a、如果一个是null、一个是undefined，那么[相等]。

b、如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。

c、如果任一值是 true ，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。

d、如果一个是对象，另一 个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。js核心内置类，会尝试 valueOf先于toString；例外的是Date，Date利用的是toString转换。非js核心的对象，令说（比较麻烦，我也不大懂）

e、任何其他组合，都[不相等]。

举例：

"1" == true

类型不等，true会先转换成数值 1，现在变成 "1" == 1，再把"1"转换成 1，比较 1 == 1， 相等。

= 赋值运算符
== 等于
=== 严格等于

例：
var a = 3;
var b = "3";

a==b 返回 true
a===b 返回 false

因为a,b的类型不一样

===用来进行严格的比较判断

1
2
var data = ({"val":"7","flag":"true"});
<FONT face=Verdana></FONT>
下面需要如何判断flag的值？

因为true加双引号==推测是字符串true

如果不加双引号===就是布尔值true

这个很重要，之前我一直没有搞清楚这一点

写法1

1
if(data.flag=true){…}else{..}
这样写怎么都是正确的,根本得不到else的值，原因是这种写法相当于
1
if(true){…}
写法2
1
if(data.flag==true){…}else{..}
没有这种写法

写法3
1
if(data.flag='true'){…}else{..}
这样写怎么都是正确的,根本得不到else的值，原因是这种写法相当于
1
if(true){…}
写法4
1
if(data.flag=='true'){…}else{..}
这个才是正确的写法

“=”：这个表示赋值，不是表示运算符

“==”：表示等于(值)

“===”：表示全等于（类型和值）

v-if与v-for的优先级
当v-if与v-for一起使用时，v-for具有比v-if更高的优先级，即Vue.js会先执行v-for,再执行v-if

v-for与v-if的优先级：

{{name}}

在这里插入图片描述

v-bind
v-bind指令用于把某个属性绑定到对应的元素属性

这是颜色测试!

在这里插入图片描述
通过v-bind把《p》元素的style的值绑定成了’color:’ + my_color表达式，当my_color的值发生变化时，对应的颜色也会变化

对于所有的属性，都可以使用v-bind

v-on
v-on指令用于触发事件
上面通过v-on:click的声明，当被单击（click后）,就会触发相应的方法
v-on后面可以接HTML的标准事件
例如：
click（鼠标单击事件）
dblclick(双击鼠标左键)
contextmenu(单击鼠标右键)
mouseover（指针移到有事件监听的元素或其子元素内）
mouseout(指针移出元素，或者移到其子元素上)
keydown（键盘动作，按下任意键）
keyup（键盘动作：释放任意键）
等
v-on可以简写，v-on:click往往会简写cheng@click,等等

v-model与双向绑定
v-model往往用来做双向绑定
双向绑定
1.可以通过表单(用户手动输入的值)来修改某个变量的值
2.可以通过程序的运算来修改某个变量的值，并且影响页面的展示

发送http请求
每个SPA项目都要使用http请求，这些请求从服务器读取数据然后
1.在前端页面进行展示，如论坛中显示文章列表
2.做一些逻辑判断，如注册页面需要判断某个用户是否已经存在
3.做一些数据库的保存操作，如修改密码

使用http请求需要为当前的SPA项目加上http请求的支持

import VueResource from 'vue-resource'

Vue.use(VueResource)

mounted()
该方法表示当页面加载完毕后应该做哪些事情，是一个钩子方法

设置Vue.js开发服务器的代理

正常来说，JavaScript在浏览器中是无法发送跨域请求的，我们需要在Vue.js的开发服务器上做转发配置

修改config/index.js文件，增加下列内容

module.exports = {
	dev: {
		'/api': {	// 1.对所有以/api开头的url做处理
			target: 'http://sivei.me' // 2.转发到simwei.me上
			changeOrigin: true,
			pathRewrite: {
				'^/api': '' 3//把url中的'/api去掉'
			}
		}
	}
}

原请求
http://localhost:8080/api/interface/blogs/all
现请求
http://siwei.me/interface/blogs/all

以上代理服务器内容只能在开发模式下才能使用，在生成模式下，只能靠服务器的nginx特性来解决js跨域问题

data()方法用于声明页面会出现的变量，并赋予初始值
mounted()方法表示页面被渲染好之后的钩子方法，会立即执行

this. $h t t p 中的 t h i s . 表示当前的 v u e 组件，$ http表示所有以 $开头的变量都是 v u e 的特殊变量，往往是 v u e 框架自带，这里的$ http就是可以发起http请求的对象

$http.get是一个方法，可以发起get请求

发起post请求
与get类似，就是第二个参数是请求的body
在vue的配置文件中，增加下面一句
src/main.js
Vue.http.options.emulateJSON = true
目的是为了能够让发出的post请求不会被浏览器转换为option请求

不同页面间的参数传递
普通的web开发中，参数传递有一下几种形式
url：/another_page?id=3
表单
而在Vue.js中，不会产生表单的提交（因为会引起页面的整体刷新）
url：同传统语言
Vue.js内部的机制

this.$route.query.id获取url中的id参数

新增路由
修改src/router/index.js文件

修改页面的跳转方式：使用事件

举目沧桑

关注

33
点赞
踩
48

收藏

觉得还不错? 一键收藏
0
评论
Vue前端框架

问题：传统的Webpack技术开发的网页流程传统技术特点：单击某个链接或按钮，或提交表单后，Webpack页面整体刷新js/css的请求很多传统技术缺点：每次页面整体刷新，都要导致浏览器重新加载对应的内容，特别卡顿加载的内容也多，传统页面的css/js多达上百个，每次打开页面都需要发送上百次请求，...
复制链接

扫一扫