一、前置知识
ES6的目标是使JavaScript语言可以适应更复杂的应用，实现代码库之间的共享。
flex思维导图
第一个vue实列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<p> {{name}}，今年 {{age}}岁 </p>
</div>
<script>
var vm = new Vue( //创建一个vue实例vm
{
el: '#app',//唯一根节点/标签
data: {
msg:'Hello!',
name: "Alice",
age: 18
}
}
);
</script>
</body>
</html>二、Vue的基础语法
data数据对象
var app = new Vue({
el: "#app",
// data写成对象形式
// data: {
// content: "Mustache表达式通过data为对象获取content的值"
// }
//data写成普通函数形式（ES5）， 返回一个对象
// data: function () {
// return {
// content: "Mustache表达式通过data为对象获取content的值"
// }
// },
//data写成简化函数形式（ES6）， 返回一个对象
data() {
return {
content: "Mustache表达式通过data为对象获取content的值"
}
},
}){{}}文本插值符中表达式的引用
<body>
<div id="app">
<!-- 不要使用复杂表达式 -->
<p>{{num+1}}</p>
<p>{{ok?"yes":"no"}}</p>
<p>{{message.split("")}}</p>
</div>
</body>
<script>
var vm = new Vue(
{
data:{
num:8,
ok: true,
message:'Hello Word'
}
}
);
</script>methods方法1-直接调用
<div id="app">
<!-- methods的直接调用 -->
<p>{{sayHello()}}</p>
<!--** 视图中使用data 数据，不须加this -->
<!-- <p>您好，欢迎来自{{city}}的{{name}} ! </p> -->
<ul>
<li>姓名 : {{name}}</li>
<li>城市 : {{city}}</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
name: "Chance",
city: "Beijing"
},
methods: {
//** 方法中使用data 数据，须加this
//完整函数写法
// sayHello: function () {
// // return `您好，欢迎来自 ${this.city} 的 ${this.name} ！` //模板字符串（es6）, 反引号，${}
// return '您好，欢迎来自' + this.city + '的' + this.name + '！' //es5，单/双引号, +
// }
//简化函数写法
sayHello() {
// return `您好，欢迎来自 ${this.city} 的 ${this.name} ！` //es6, 反引号，${}
return '您好，欢迎来自' + this.city + '的' + this.name + '！' //es5，单/双引号, +
}
}
})
</script>methods方法2-js事件调用
<div id="app">
<div>
<p>旧文本</p>
<p>tip:点击按钮把“旧文本”字样修改为“新文本”</p>
<button onclick="btnClick()">点击</button>
</div>
</div>
<script>
function btnClick(){
document.getElementsByTagName('p')[0].innerHTML='新文本'
}
// 或
// document.getElementsByTagName('button')[0].onclick= function (){
// document.getElementsByTagName('p')[0].innerHTML='新文本'
// }
</script>methods方法3-vue事件调用
<div id="app">
<div>
<p> {{msg}}</p>
<p>tip:点击按钮把“旧文本”字样修改为“新文本”</p>
<!-- 此处方法可以不用加() -->
<button v-on:click="btnClick" >点击</button>
<!-- v-on 可以简写为 @ -->
<!-- 简写形式 -->
<!-- <button @click="btnClick">点击</button> -->
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "旧文本"
},
// 页面的点击事件处理方法都需要放到 methods 里面
methods: {
btnClick() {
//使用data中的数据，要加this
this.msg = "新文本"
}
}
})
</script>三、Vue常用指令
1、v-text
v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。
2、v-html
v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。
3、v-bind
v-bind指令用于实现单向动态数据绑定。还可以简写为":"
前面学习的v-text和v-html指令主要作用是将值插入到模板标签的内容当中。但是，除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性。
（1）绑定单个动态名时：
（2）绑定 多个动态名时：
（3）同时绑定静态+动态类名时：
4、v-on
v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)。
5、v-for
v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for， 它需要结合着in或者of来使用。
6、v-model
v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。
v-model用在复选框时,v-model的vue变量是：
-
非数组 :关联的是checked属性
-
数组 :关联的是value属性
v-model.修饰符="vue数据变量"
| .number | 以parseFloat转成数字类型 |
| .trim | 去除首尾空白字符 |
| .lazy | 在change时触发而非inupt时 |
7、v-if和v-else
v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。
v-if的使用一般有两个场景：
1.通过条件判断展示或者隐藏某个元素或者多个元素；
2.进行视图之间的切换。
8、v-show
v-show是另一个条件渲染语句，用于根据条件展示元素，用法与v-if大致一样。
带有v-show的元素始终会被渲染并保留在DOM中，v-show指令使用css样式来控制元素的显示/隐藏。值得注意的是，注意，v-show不支持<template>元素，也不支持v-else。
四、事件修饰符
事件修饰符：@事件名.修饰符="methods里函数"
| .stop | 阻止事件冒泡 |
| .prevent | 阻止默认行为 |
| .once | 程序运行期间, 只触发一次事件处理函数 |
| .capture | 添加事件监听器时使用事件捕获模式 |
| .self | 将事件绑定到该元素本身，只有自身才能触发 |
键盘事件的修饰符：在我们的项目中，经常需要监听一些键盘事件来触发程序的执行，例如键盘的按下（keydown）和键盘的松开(keyup)事件等等。这些事件我们往往可以给其添加一些修饰符来进行修饰，比如：
| .enter | 监听enter回车键的触发 |
| .tab | 监听tab键的触发 |
| .up、.down 、.left、 .right | 监听上、下、左、右键的触发 |
| ctrl | 监听ctrl键的触发 |
| ······ |
五、Vue脚手架项目环境配置
安装node 下载 | Node.js 中文网
http://nodejs.cn/download/
// 通过npm全局安装@vue/cli脚手架 @3.10表示下载某个指定版本，如果不写，则下载最新版本
npm install -g @vue/cli
PS:如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装
//安装淘宝镜像的命令行
① npm install -g cnpm --registry=https://registry.npmmirror.com
// 如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些
② cnpm install -g @vue/cli
//PS：如需要卸载vue/cli包，可执行以下命令行
npm uninstall -g @vue/cli
注意：最近发现很多同学使用npm命令经常容易出现卡死不懂是情况，如出现这种情况，清执行此命令，即可解决：
npm config set registry https://registry.npm.taobao.org
或者，哪个方式快，用哪个
npm config set registry https://registry.npmmirror.com创建项目：
cd helloword运行项目：
npm run serve六：后台管理系统路由实现步骤
参考链接
七、Element-UI练习
根据下面的参考资料，完成Element-UI练习。
Element-UI快速入门：Element-UI快速入门 - 前端教程
Element UI官网：https://element.faas.ele.me/#/zh-CN
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
