vue第一堂课
作者：互联网
ESMAScript6语法
主要目的是能看懂别人写的es6的语法，主流浏览器中部分es6语法不识别，可以通过babel来转换。
es6学习地址：http://es6.ruanyifeng.com/
let和const声明变量
es5中的var
1.es5中使用var来声明变量，会有变量提升，即在任意地方定义的变量，都会提升到文件的开头进行声明。
下面两份代码是等价的，在解析时，代码1就会解析成代码2的样子。
代码1
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
console.log(a)
var a = 10;
console.log(a)
</script>
</body>
</html>
代码2
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var a;
console.log(a)
a = 10;
console.log(a)
</script>
</body>
</html>
结果都一样：
变量提升，导致var声明的变量属于全局作用域。
2.一个变量的多次声明，后面变量会替换前面声明的变量，var声明的变量存在覆盖现象。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
console.log(a)
{
a = 10;
}
console.log(a)
</script>
</body>
</html>
es6的let和const
let声明的变量是属于局部作用域，只在当前作用域有效。重复声明定义会报错。
const声明的是常量，一旦声明定义不可修改。也是局部作用域的。
es6中的模板字符串
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
name = "张三"
age = 28
desc = `${name} 是个学生，今年${age}岁。`
console.log(desc)
</script>
</body>
</html>
输出：
es6 箭头函数
var add = (a,b)=>{
函数体
}
箭头函数的问题：
- this指向发生改变
- arguments不能使用
es6 对象的单体模式
fav就是一个函数
var person = {
name = "xxx";
fav(){
console.log(this) //this指针正常，指向的是当前对象
console.log(arguments) // arguments正常，可以使用
}
}
es6 class使用
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
class Person{
constructor(name, age){
this.name = name
this.age = age
}
show(){
alert(this.name)
}
};
var p = new Person("zhans", 20);
p.show();
</script>
</body>
</html>
vue起步
vue 是渐进式的javascript框架，官方文档：https://cn.vuejs.org
使用vue的三中方式：
- 直接下载并用
<script>标签导入 - CDN方式引入：
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> - npm install vue
下载安装nodejs
1.要使用vue需要先下载安装nodejs，下载地址：https://nodejs.org/en/，其自带包管理器：npm。
2.在win10中傻瓜式安装
3.测试是否安装成功
4.创建项目目录并使用npm初始化vue环境
5.下载保存vue到当前项目npm install vue --save
使用vue
在项目根目录新建index.html文件
简单使用
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<!-- 模板语法主要作用是插入值， {{ data中的数据属性 }}， 将数据属性渲染到页面 -->
<h3>{{ msg }}</h3>
<h3>{{ name }}</h3>
<h3>{{ 1+1 }}</h3>
<h3>{{ 1==1 ? "真的" : "假的" }}</h3>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // 目的地，要到哪个标签。
data: { // 可以是函数，也可以是对象
// 数据属性
// 数据驱动视图，数据更改，视图进行更改
msg:"hello vue",
name:"lxt"
}
});
app.name = "xx";
console.log(app)
</script>
</body>
</html>
运行：
两者是等价的
指令系统
在vue中提供了一套为(数据驱动视图)更方便的操作，这些操作称为指令系统，以v-xxx表示。
指令中封装了一些DOM行为，结合属性作为一个暗号，暗号有对应的值，根据不同值，框架会进行相应的DOM操作绑定。
v-text和v-html
v-text等价于{{}}插值，内部实现原理 innerText
v-html内部实现原理 innerHTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<h3>{{ msg }}</h3>
ss
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // 目的地，要到哪个标签。
data: {
msg:"hello vue",
msg2:"<a href='#'>跳转</a>",
},
template: `
<div>
<h3>{{msg}}</h3>
<h2 v-text='msg2'></h2>
<p v-html='msg2'></p>
</div>
`
// template的优先级高于el,即出现了template就不会渲染el指定目的地的内容。会渲染到body下
});
</script>
</body>
</html>
v-if和v-show
两者都可以用来对当前DOM显示或者隐藏，当isShow是true时显示，是false时隐藏。
不过两者隐藏的方式不一致。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{
width:300px;
height:300px;
background-color:red;
}
</style>
</head>
<body>
<div id="app">
<h3>{{ msg }}</h3>
ss
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // 目的地，要到哪个标签。
data: {
msg:"hello vue",
msg2:"<a href='#'>跳转</a>",
isShow:false
},
template: `
<div>
<h3>{{msg}}</h3>
<h2 v-text='msg2'></h2>
<p v-html='msg2'></p>
<div class="box" v-if='isShow'></div>
<div class="box" v-show='isShow'></div>
</div>
`
});
</script>
</body>
</html>
v-if不仅可以插入数据属性，也可以做运算判断
<div id="app">
<h3>{{ msg }}</h3>
ss
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // 目的地，要到哪个标签。
data: {
msg:"hello vue",
msg2:"<a href='#'>跳转</a>",
isShow:false
},
template: `
<div>
<h3>{{msg}}</h3>
<div class="box" v-if='Math.random() > 0.5'>大于0.5</div>
<div class="box" v-else>小于0.5</div>
</div>
`
});
</script>
v-for
下面是一个生成菜单的例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{
width:300px;
height:300px;
background-color:red;
}
</style>
</head>
<body>
<div id="app">
<h3>{{ msg }}</h3>
ss
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // 目的地，要到哪个标签。
data: {
msg:"hello vue",
msg2:"<a href='#'>跳转</a>",
isShow:false,
itemList:[
{id:1,name:"面",price:15},
{id:2,name:"炒面",price:16},
{id:3,name:"烩面",price:17},
],
per:{
name:"zhansan",
age:18,
hobby:"sleep"
}
},
template: `
<div>
<h3>{{msg}}</h3>
<h2 v-text='msg2'></h2>
<ul>
<li v-for = '(item,index) in itemList'>
<h1>{{index}}--菜名：{{ item.name }}</h1>
<h1>价格：{{ item.price }}</h1>
</li>
</ul>
<p v-for = '(value, key) in per'>{{key}}:{{value}}</p>
</div>
`
// item是itemList中的每个元素，index是元素的索引
// 遍历对象(value,key), 第一个是value值，第二个是key值
});
</script>
</body>
</html>
v-bind
对所有属性的绑定，绑定class,href,src,...，只要使用了v-bind，后面的字符串一定是数据属性中的值。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{
width:300px;
height:300px;
background-color:red;
}
.active{
background-color:yellow;
}
</style>
</head>
<body>
<div id="app">
<h3>{{ msg }}</h3>
<div>
<div class="box" v-bind:class="{ active: isActive }"></div>
<!-- isActive为true时，active会加到class中 -->
<a v-bind:href="href">百度</a>
</div>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // 目的地，要到哪个标签。
data: {
msg:"hello vue",
msg2:"<a href='#'>跳转</a>",
isShow:false,
isActive:true,
href:"http://www.baidu.com",
},
template: ``
});
</script>
</body>
</html>
v-if和v-on结合
事件三要素：事件源、事件、事件驱动程序
使用v-on对当前DOM绑定事件，如v-on:click绑定点击事件。所有原生的js事件使用v-on都可以绑定。
点击button对其进行隐藏显示
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{
width:300px;
height:300px;
background-color:red;
}
.active{
background-color:yellow;
}
</style>
</head>
<body>
<div id="app">
<h3>{{ msg }}</h3>
<div>
<!-- <div class="box" v-on:click="isShow=false" v-if="isShow"></div> --> <!-- 直接写处理逻辑-->
<!-- <div class="box" v-on:click="showHandler()" v-if="isShow"></div> --> <!-- 通过函数调用 -->
<button v-on:click="showHandler">显示/隐藏</button>
<div class="box" v-if="isShow"></div>
</div>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // 目的地，要到哪个标签。
data: {
msg:"hello vue",
msg2:"<a href='#'>跳转</a>",
isShow:true,
},
template: ``,
// 在vue中所有的事件都声明在methods中
methods:{
showHandler(){
this.isShow = !this.isShow;
}
}
});
</script>
</body>
</html>
实现轮播图
很重要的几个字：数据驱动视图
实现点击图片下面的数字来切换图片。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{
width:300px;
height:300px;
background-color:red;
}
.active{
background-color:red;
}
ul{
list-style: none;
overflow: hidden;
width: 400px;
}
ul li{
background-color: blue;
text-align: center;
float:left;
color: #fff;
line-height: 40px;
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<div id="slider">
<div>
<img :src="currentSrc">
<ul>
<li v-on:click="changeIndex(index)" v-bind:class="{active: currentIndex==index}" v-for="(value, index) in imageArray">
{{ value["id"] }}
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var imgArray = [
{id:1, src:"./image/1.png"},
{id:2, src:"./image/2.png"},
{id:3, src:"./image/3.png"},
{id:4, src:"./image/4.png"}
];
var app = new Vue({
el: '#slider', // 目的地，要到哪个标签。
data: {
imageArray:imgArray,
currentIndex:0,
currentSrc:imgArray[0]["src"],
},
template: ``,
// 在vue中所有的事件都声明在methods中
methods:{
changeIndex(index){
this.currentIndex = index;
this.currentSrc = this.imageArray[index]["src"];
}
}
});
</script>
</body>
</html>
v-model的数据双向绑定
数据驱动视图：数据就是data,视图就是整个页面的标签。
单向数据绑定，一个数据可以绑定到多个view上。
双向数据绑定，view1发生改变，导致data发生改变，再导致view2相应的改变
v-model来实现vue的双向数据绑定，只允许在表单控件中使用，input,textarea,selected,...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<input type="" name="name" v-model="msg">
<p>{{msg}}</p>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // 目的地，要到哪个标签。
data: {
msg:"heh",
},
template: ``,
// 在vue中所有的事件都声明在methods中
methods:{
}
});
</script>
</body>
</html>
文本框为view1,下面的p标签为view2，在文本框中输入值，下面的内容随着改变。
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
双向数据绑定的实现
监听input的输入，动态修改数据。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<!-- :value 等价于 v-bind:value , @input 等价于 v-on:input-->
<input type="" name="name" :value="msg" @input="changeHandler">
<p>{{msg}}</p>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // 目的地，要到哪个标签。
data: {
msg:"heh",
},
template: ``,
// 在vue中所有的事件都声明在methods中
methods:{
changeHandler(evnet){
this.msg = evnet.target.value;
}
}
});
</script>
</body>
</html>
总结
v-bind可以缩写为 :
v-on 可以缩写为 @
v-text v-html {{}} : 对页面的dom进行赋值运算，相当于js中的innerText innerHTML
v-if = 'true'
// 创建
var oP = document.createElement('p')
oDiv.appendChild(op)
v-if = "false"
// 销毁
oDiv.removeChild(op)
v-show = "true"
oDiv.style.display = 'block'
v-show = "false"
oDiv.style.display = 'none'
标签：vue,name,app,var,msg,一堂课,data 来源： https://blog.csdn.net/no_name_sky/article/details/121758292