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>
    		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></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;例外的是DateDate利用的是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中的this.表示当前的vue组件, httpthis.vuehttp表示所有以 开 头 的 变 量 都 是 v u e 的 特 殊 变 量 , 往 往 是 v u e 框 架 自 带 , 这 里 的 开头的变量都是vue的特殊变量,往往是vue框架自带,这里的 vuevuehttp就是可以发起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文件

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

Logo

前往低代码交流专区

更多推荐