用到的前台编程工具是Visual Studio Code,暂时是官网下载vue.js到本地使用
一、Visual Studio Code需要安装的插件:
jshint :js代码规范检查
Beautify :一键美化代码插件
Vetur: .vue 文件识别插件
Javascript(Es6) code snippets :Es6语法提示
Auto Rename Tag :自动命名标签,标签成对出现
Auto Close Tag: 自动闭合标签
vue helper :一些vue代码的快捷代码插件
vscode-icons:提供不同文件夹的显示区别
按下ctrl+k 在按下ctrl+s 可以查看快捷键
初次体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="vue.js"></script>
<title>01vue体验</title>
</head>
<body>
<div id="app">
<P>{{username}}</P>
<p>{{greet()}}</p>
<button @click="username='李四'">改名字</button>
</div>
<script>
new Vue({
el:"#app",
data:{
username:"张三"
},
methods:{
greet(){
return "你好"
}
}
})
</script>
</body>
</html>
二、Vue模板语法
1.v-once加上之后不会改变原来的值
2.v-html读取变量的时候会当做HTML元素来解析
3.v-bind属性绑定,要读取vue.data中的属性,就要使用这个v-bind,也可以省略使用如:<img v-bind:src="logo" alt="">或者<img :src="logo" alt="">
小插曲:设置自己的代码快捷方式:
a.ctrl+shift+p 搜索snippets 点击第一个之后找到html.json打开
b.按照说明操作就可以了----zyb
4.绑定Class
a.通过数组的方式绑定:
<div id='app'>
<p v-bind:class="[pcl1,pcl2]">张三</p>
</div>
<script>
new Vue({
el:'#app',
data:{
pcl1:"title",
pcl2:"main-title",
}
})
</script>
b.通过对象的当时绑定:
<div id='app'>
<p :class="{title:strong1,'main-title':strong2}">哈哈哈</p>
<button @click="strong=true">文字加粗</button>
</div>
<script>
new Vue({
el:'#app',
data:{
strong1:false,
strong2:false
}
})
</script>
5.绑定Style:
a.用对象的方式绑定:
<div id='app'>
<p :style="{backgroundColor:backgroundColor}">我爱你,中国</p>
</div>
<script>
new Vue({
el:'#app',
data:{
backgroundColor:"red"
}
})
</script>
b.通过数组的方式绑定:
<div id='app'>
<p :style="[pStyle1,pStyle2]">我爱你,中国</p>
</div>
<script>
new Vue({
el:'#app',
data:{
backgroundColor:"red",
pStyle1:{
'background-color':"blue",
'font-size':"30px"
},
pStyle2:{
'border-bottom':"20px solid #000"
}
}
})
</script>
6.JavaScript表达式:
在属性绑定和变量读取中,可以使用表达式,常见的表达式有:变量读取,变量运算,三目运算符,函数调用,取反等。代码如下:
<div id='app'>
<div :style="{color:danger?'red':'black'}">三目运算符执行:{{message.split(" ").reverse().join(" ")}}</div>
<!--split分割,reverse翻转,join数据转字符串-->
<div>调用方法的执行结果:{{greet()}}</div>
<div>这个是!取反的:{{!istest}}</div>
</div>
<script>
new Vue({
el:'#app',
data:{
//条件?条件成立的值:条件不成立的值---三目运算符
danger:true,
message:"hello word",
istest:true
},
methods:{
greet(){
return "自己定义的函数要放在methods中,"
}
}
})
7.条件判断:有v-if,v-else-if,v-else。如果有多个元素渲染要用template标签,vue默认会重用相同标签,入过不想被重用加上key属性。
a.单个标签显示的:
<div id='app'>
<p v-if="tianqi=='sun'">钓鱼</p>
<p v-else-if="tianqi=='rain'">打游戏</p>
<p v-else>睡觉</p>
</div>
<script>
new Vue({
el:'#app',
data:{
tianqi:"rain"
}
})
</script>
b.多个标签显示的:
<div id='app'>
<template v-if="age<18">
<p>第一个模板</p>
<p>第二个模板</p>
</template>
<template v-else-if="age>=18">
<p>第三个模板</p>
<p>第四个模板</p>
</template>
</div>
<script>
new Vue({
el:'#app',
data:{
age:4
}
})
</script>
8.v-show和v-if的区别:都是判断使用,v-show只有一个,标签不能在template中使用,代码如下:
<div id='app'>
<div v-show="logintype=='username'">
<label for="">用户名:</label>
<input type="text" name="username" placeholder="密码" key="username">
</div>
<div v-show="logintype=='email'">
<label for="">邮箱:</label>
<input type="text" name="email" placeholder="邮箱" key="email">
</div>
<button @click="changeLogintype">切换登录方法</button>
</div>
<script>
new Vue({
el:'#app',
data:{
tianqi:"rain",
age:4,
logintype:"username"
},
methods:{
changeLogintype(){
this.logintype = this.logintype=='username'?"email":"username"
}
}
})
</script>
9.v-for循环:语法 变量 in 循环体
a. 数组循环:<tr v-for="book in books">,如果要循环下标,接个圆括号就OK了,但是位置第一个是对象,第二个才是下标
b. 对象循环:和循环数组是一样的,区别就是循环的时候是value,key,代码如下:
<div id='app'>
<!-- 表格table,表头thead,表格行tr,列th,表单体tbody,下面的index是加的序号,是0开始的,注意的是第一个是对象,第二个是下标,位子是固定的-->
<table>
<thead>
<tr>
<th>序号</th>
<th>标题</th>
<th>作者</th>
</tr>
</thead>
<tbody>
<!-- <tr v-for="book in books">
<th>{{book.title}}</th>
<th>{{book.author}}</th>
</tr> -->
<tr v-for="(book,index) in books">
<th>{{index+1}}</th>
<th>{{book.title}}</th>
<th>{{book.author}}</th>
</tr>
</tbody>
</table>
<div v-for="(value,key) in users">
{{key}}:{{value}}
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
books:[{
'title':'坏蛋是怎样炼成的1',
'author':'六道'
},
{'title':'坏蛋是怎样炼成的2',
'author':'七道'
},
{'title':'坏蛋是怎样炼成的3',
'author':'八道'
}],
users:{
"username":"张三",
"age":"24"
}
}
})
</script>
10.v-for 循环状态保持
默认情况下,数组中的顺序发生变化重新渲染的时候,vue会重新利用之前的元素,不会重新排序,可以添加一个key属性,key只能是数字或者字符串,一般是用循环出来的对象的某个唯一的值。vue2.2以上的vue-for中key是必须的。代码如下:
<div id='app'>
<div v-for="book in books" :key="book.title">
<label>标题</label>
<input type="text" :placeholder="book.title">
</div>
<button @click="changeBookSort">改图书顺序</button>
</div>
<script>
new Vue({
el:'#app',
data:{
books:[{
'title':'坏蛋是怎样炼成的1',
'author':'六道'
},
{'title':'坏蛋是怎样炼成的2',
'author':'七道'
},
{'title':'坏蛋是怎样炼成的3',
'author':'八道'
}],
users:{
"username":"张三",
"age":"24"
}
},
methods:{
changeBookSort(){
this.books.sort(function(a,b){
return Math.random(0,1)-0.5
})
}
}
})
</script>
11.触发视图更新
a.直接赋值更新 this.heros=[],模板会立即更新,代码如下:
<div id='app'>
<ul>
<li v-for="hero in heros" :key="hero">
{{hero}}
</li>
</ul>
<button @click="update">更新</button>
</div>
<script>
new Vue({
el:'#app',
data:{
heros:['鸡毛飞上天','北京爱情故事','奋斗'],
user:{"username":"张三"}
},
methods:{
update(){
this.heros = ['三毛流浪记']
}
}
})
</script>
b.通过函数更新 this.heros.push("xx")代码如下:
<div id='app'>
<ul>
<li v-for="hero in heros" :key="hero">
{{hero}}
</li>
</ul>
<button @click="pushhero">添加一个元素</button>
</div>
<script>
new Vue({
el:'#app',
data:{
heros:['鸡毛飞上天','北京爱情故事','奋斗']
},
methods:{
pushhero(){
this.heros.push("三毛流浪记")
}
}
})
</script>
c.函数可以直接视图更新的有:
push()添加元素的方法:this.heros.push("三毛流浪记")
pop()删除数组中最后一个元素:this.heros.pop()
shift()删除数组中第一个元素:this.heros.shift()
unshift(itme):在数组开头位置添加一个元素:this.heros.unshift('西游记')
splice(index,howmany,item1,...,itemN):向数组中添加或删除或者替换元素
向heros第0个位置添加元素 this.heros.splice(1,0,"splice添加"),index:从第几个开始操作,howmany:操作几个元素,item1:操作的参数
下标从0开始删除2个元素 this.heros.splice(0,2)
下标从0开始替换2个元素 this.heros.splice(0,2,"splice替换",'splice替换')
sort(funcion)排序:this.heros.sort(funcion(x,y)){a=Math.random(); return}
reverse()将数组元素进行反转:this.heros.reverse()
d.以上都是可以触发更新的,不能触发更新的有:过滤用的filter,字符串拼接的concat,切片的slice。可以进行操作之后赋值才让他直接更新,代码如下:
<div id='app'>
<ul>
<li v-for="hero in heros" :key="hero">
{{hero}}
</li>
</ul>
<button @click="concathero">两个数组拼接赋值显示</button>
</div>
<script>
new Vue({
el:'#app',
data:{
heros:['鸡毛飞上天','北京爱情故事','奋斗']
},
methods:{
concathero(){
this.heros=this.heros.concat(['张三','李四'])
}
}
})
</script>
e.如果想要在对象上新增一个属性,只能通过Vue.set来实现。想要通过下标修改数组中的值并让立即更新,也只能使用Vue.set来实现,代码如下:
<div id='app'>
<ul>
<li v-for="hero in heros" :key="hero">
{{hero}}
</li>
</ul>
<div v-for="(value,key) in user">
{{key}}:{{value}}
</div>
<button @click="updateArray">更新数组</button>
<button @click="updateOjject">更新数组</button>
</div>
<script>
new Vue({
el:'#app',
data:{
heros:['鸡毛飞上天','北京爱情故事','奋斗'],
user:{"username":"张三"}
},
methods:{
updateArray(){
Vue.set(this.heros,0,'哇哈哈')
},
updateOjject(){
// this.user.username='增拉萨'
Vue.set(this.user,'age',18)
}
}
})
</script>
12.事件绑定
a.可以直接把代码放在元素上
b.可以把代码放在函数中然后在@事件后面写上函数名称
c.常规的写法是v-on,简写是@+事件名
d.可以传递参数,也可以传递$enent这个特殊参数
e.常见的修饰符: a. .stop: event.stopPropagation,阻止事件冒泡
b. .captuer 事件捕获
c. .once 这个事件只执行一次
d. .self 代表当前这个被点击的元素自身
e. .passive 在当前滚动的时候告诉浏览器不会阻止默认行为,可以使滚动流畅
f. .prevent 阻止浏览器跳转
f.代码如下:
<div id='app'>
<ul>
<li v-for="book in books" :key="book" v-on:click="liCilck(book)">
{{book}}
</li>
</ul>
<!-- <a href="https://www.baid.com" @click="gotozto($event)">到大运</a> -->
<a href="https://www.baid.com" @click.prevent="gotozto($event)">到大运</a>
</div>
<script>
new Vue({
el:'#app',
data:{
books:['坏蛋是怎样练成的',"钢铁是怎样练成的"]
},
methods:{
liCilck(value){
console.log(value);
},
gotozto(event){
// event.preventDefault()
//这两个注释代码成对使用
window.location="http://www.kuaiyun.net.cn"
}
}
})
</script>