Andy 胡

导航

Vue.js

Vue.js

Vue读作/vjuː/,是一种前端开发框架,

Vue发布于2014年7月,使用MVVM框架:

  • M:Model,模型,包括数据和基本操作

  • V:View,视图,页面渲染结果

  • VM:View-Model,模型与视图的双向操作,无需开发人员干涉.

V↔VM↔M,开发人员只需要专注于View和Model,不用管交互,导致JQuery无用武之地.

官网

github

安装Vue

1.安装Node.js

英文:https://nodejs.org/en/

中文:https://nodejs.org/zh-cn/download/

下载后直接下一步到完成.

测试是否安装成功可以进如控制台(cmd)查看版本信息:

node -v

测试NPM

Node Package Manager: Node.js 的包管理工具.

​ 以前各种第三方包散布在各处,不好找. NPM的目的正是管理这些第三方的包.

​ 现在NPM 已经成为 Node.js 包的标准发布平台，用于 Node.js 包的发布、传播、依赖控制。

​ NPM随Node.js一起安装,可以直接输入cmd查看版本信息:

npm -v

2.使用镜像

npm的默认源在国外,推荐使用国内的镜像

nrm(npm registry)是npm源管理器，允许切换npm源..

一般手法是安装nrm,切换到国内镜像

npm install nrm -g

-g表示全局安装

可能因为网络的原因,无法正常安装:

error code Z_BUF_ERROR
error errno -5
error zlib: unexpected end of file

加入安装成功:

[nrm ls]查看

[nrm use taobao]切换到淘宝的库

[nrm test taobao]测试网速

2.改用安装cnpm

cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

JS加强

let定义变量,比较严格,作用域外不能使用.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ECMAScript 2015,2015年6月发布</title>
	</head>
	<body>
	<p>去浏览器内测试，F12打开控制台看结果</p>
		<script>
			for(var i =0;i<10;i++){
				
			}
			console.log(i);
			for(let j =0;j<10;j++){
				
			}
			console.log(j);
		</script>
	</body>
</html>

解构表达式:快速地取值(数组或对象)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<script>
			let arr = ['A', 'B', 'C', 'D', 'E'];
			let [, , x, y] = arr; // 对数组进行解构，数据量不大的情况下，比较快的取值方式
			console.log(x); // 取到第3个元素
			console.log(y);
			let [, ...arr2] = arr;
			console.log("数组的后半部分元素：" + arr2);
		</script>
		<script>
			 // 解构对象
			let dog = {
				name: '金毛',
				age: 2,
				color: 'yellow'
			};
			let {
				name, color
			} = dog;
			console.log("解析对象，默认用属性名：" + color);
			let {
				name: n,
				color: c
			} = dog;
			console.log("解析到新的变量中：" + c);
			 // 复制对象
			let {...cat
			} = dog;
			console.log(cat === dog); // 深拷贝,地址不一样
			let egg = dog;
			console.log(egg === dog); // 浅拷贝
		</script>
		<script>
			 // 函数(类似于Lambda表达式,只不过使用=>)
			const add = (a, b) => a + b;
			console.log(add(2, 3));
		</script>
		<script>
			const p = {
				name: '吕布',
				introduce: function() {
					console.log('温侯吕布');
				},
				introduce2() {
					console.log("ES6新写法,无需冒号和function");
				}
			}
			p.introduce();
			p.introduce2();
		</script>
		<script>
			 // Map-Reduce
			let arrString = ['1', '2', '3', '4', '5'];
			console.log(arrString);
			 // ---Map---
			 // map():对元素逐个处理
			let arrInt = arrString.map(s => parseInt(s)); // 转成int数组
			console.log(arrInt);
			 // ---Reduce---
			 // reduce():把元素做聚合处理,需要2个参数,结果作为下次处理的第2个参数
			arr3 = arrInt.reduce((a, b) => a + b);
			 // s1:1+2
			 // s2:3+s1
			 // ...
			console.log(arr3);
		</script>
	</body>

</html>

Vue快速入门

  1. 创建新的空工程
  2. 创建模块"static web"
  3. 在idea的终端(Terminal)输入:[npm init -y],生成默认<package.json>，类似于pom.xml
  4. 在idea的终端(Terminal)输入:[cnpm install vue --save],对当前项目安装Vue.

安装成功后,项目会发生两个变化:

①项目中多出了一个文件夹:[node_modules]

②再打开<package.json>,会多出一些Vue的内容:

  "dependencies": {
    "vue": "^2.6.10"
  }
  1. 新建HTML文件(和node_modules同级):

核心代码: new Vue({el:..., data:{...}, method:{...}})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="mypage">
    <h1>
        恭喜 {{name}} 又中大奖!获得贷款{{sum}}百万的资格!
    </h1>
    VM机制:页面改值,及时反映:
    <br>
    v-model属性关联变量:<input type="text" v-model="sum">
    v-on:click替代onclick(亦可写作@click):<input type="button" v-on:click="func" value="+">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#mypage', // el是element的缩写,vue作用的标签
        data: {
            name: "马化云",
            sum: '1'
        },
        methods: {
            func() {
                this.sum++;
            }
        }
    });
</script>

</body>
</html>

使用v-text代替插值表达式

{{name}}被称为"插值表达式",在网速不好的时候,如果数据一时未能成功加载,源码会显示在浏览器上,用户体验不好.

测试代码:

<body>
<div id="mypage">
    <h1>
        恭喜 {{name}} 又中大奖!获得贷款{{sum}}百万的资格!
    </h1>
    <h1>
        <span v-text="name"></span>
    </h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#mypage', 
        data: {
            name: "", // 不赋值,一般都是从后台取值
            sum: '1'
        },
        methods: {
        },
        // 创建时:
        created() {
            this.name="馬化云";
        }
    });
</script>

</body>

测试方法:

  1. 谷歌浏览器中,F12,NetWork,把Online模式调为3G模式.
  2. 在刷新按钮上右键选择"清空缓存并硬性重新加载"

把差值表达式换为:

<span v-text="name"></span>

另外还有v-html属性,用于HTML代码写入.

posted on 2019-03-31 16:02  talkwah  阅读(123)  评论(0)    收藏  举报