Vue
例如, <li v-for="item in items">
{{ item}}
遍历数组:
<li v-for="(item, index) in items"># index表示索引值
遍历对象:
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
单行文本框
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多行文本框
<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
复选框:单个复选框,绑定到布尔值
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
多个复选框,绑定到同一个数组
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
data:{ checkedNames : [] } 为数组
单选框 radio
<input type="radio" v-model="str" value="0">
<input type="radio" v-model="str" value="1"> // data:{ str:"" } ,str的值和value的值一致
下拉框 select option
<div id="app">
<select v-model="str" id="">
<option disabled value="3">请选择</option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">深圳</option>
</select>
{{ str }}
created
beforeMount
mounted // 浏览器上的内容,加载完,然后一直等待这里
beforeUpdate
updated // 修改数据,会自动调用该方法
beforeDestroy // 程序被杀死前的的遗言
Vue.filter('rever', function (value) {
return value.split('').reverse().join('')
})
var vm = new Vue({
el:'#app',
data:{
msg: 'abcdefg',
title: 'ABDEEDJSOIFDOS',
flag: 'hello world'
},
内置的过滤器:
Vue.directive('fodd',{
inserted:function(el){
el.style.width = '100px'
el.style.height = '100px'
el.style.border = '1px solid gold'
}
})
var vm = new Vue({
el:'#app',
内置指令:
1.列表渲染
通过 v-for 指令可以将一组数据渲染到页面中,数据可以是数组或者对象,v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。例如, <li v-for="item in items">
{{ item}}
遍历数组:
<li v-for="(item, index) in items"># index表示索引值
遍历对象:
<div v-for="(value, key, index) in object"> # 值 、键、索引值
<!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"
>
<
title
>Document
</
title
>
<
script
src=
"./vue.min.js"
>
<
/
script
>
<
script
>
window.
onload =
function () {
var
vm =
new
Vue({
el:
'#app',
data:{
msg:
'hello world',
array:[
'海贼王',
'火影',
'妖精的尾巴'],
obj:{
name:
'zhangsan',
age:
20
}
}
})
}
<
/
script
>
</
head
>
<
body
>
<
div
id=
"app"
>
<!-- 数组的遍历 -->
<
div
>
<
div
v-for=
"i in array"
>
{{i}}
</
div
>
</
div
>
<
div
>
<
div
v-for=
"(item,index) in array"
>
{{item}} --- {{index}}
</
div
>
</
div
>
<!-- 对象的遍历 -->
<!-- obj:{
name:'zhangsan',
age:20
} -->
<
ul
>
<
li
v-for=
"value in obj"
>
{{value}}
</
li
>
</
ul
>
<
ul
>
<
li
v-for=
"(value,key) in obj"
>
{{value}} --- {{key}}
</
li
>
</
ul
>
<
ul
>
<
li
v-for=
"(value,key,index) in obj"
>
{{value}} --- {{key}}----{{index}}
</
li
>
</
ul
>
</
div
>
</
body
>
</
html
>
2.事件处理
实际开发中,事件绑定有时候牵涉到阻止事件冒泡以及阻止默认行为<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!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"
>
<
title
>Document
</
title
>
<
script
src=
"./vue.min.js"
>
<
/
script
>
<
script
>
window.
onload =
function (){
var
vm =
new
Vue({
el:
'#app',
data:{
},
methods: {
func1
:
function(){
alert(
'func1')
},
func2
:
function(){
alert(
'func2')
}
}
})
}
<
/
script
>
<
style
>
.box {
width:
300px;
height:
300px;
background-color:
pink;
}
.subbox {
width:
100px;
height:
100px;
background-color:
blue;
}
<
/
style
>
</
head
>
<
body
>
<
div
id=
"app"
>
<
div
class=
"box" @
click=
"func1"
>
<
div
class=
"subbox" @
click.
prevent.
stop=
"func2"
></
div
>
<
div
class=
"subbox" @
click.
prevent.
stop
></
div
>
</
div
>
</
div
>
</
body
>
</
html
>
3.表单输入绑定
可以用 v-model 指令在表单<input> 及 <textarea>、<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素单行文本框
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多行文本框
<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
复选框:单个复选框,绑定到布尔值
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
多个复选框,绑定到同一个数组
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
data:{ checkedNames : [] } 为数组
单选框 radio
<input type="radio" v-model="str" value="0">
<input type="radio" v-model="str" value="1"> // data:{ str:"" } ,str的值和value的值一致
下拉框 select option
<div id="app">
<select v-model="str" id="">
<option disabled value="3">请选择</option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">深圳</option>
</select>
{{ str }}
</div> // data:{ str:"3"} ,str的值和value的值一致
<!-- 表单 -->
<!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"
>
<
title
>Document
</
title
>
<
script
src=
"./vue.min.js"
>
<
/
script
>
</
head
>
<
body
>
<
div
id=
"app"
>
<
input
type=
"text"
v-model=
"msg"
> {{msg}}
<
button @
click=
"change"
>按钮
</
button
>
<
textarea
v-model=
"title"
name=
""
id=
""
cols=
"30"
rows=
"10"
>
</
textarea
>
{{title}}
</
div
>
<
script
>
var
vm =
new
Vue({
el:
'#app',
data: {
msg:
'',
title:
'hello world'
},
methods: {
change
:
function () {
this.
msg +=
'hello'
}
}
})
<
/
script
>
</
body
>
</
html
>
<!-- 单选框 -->
<!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"
>
<
title
>Document
</
title
>
<
script
src=
"./vue.min.js"
>
<
/
script
>
</
head
>
<
body
>
<
div
id=
"app"
>
<
input
type=
"radio"
value=
"0"
name=
"msg"
>
<
input
type=
"radio"
value=
"1"
name=
"msg"
>
<
input
type=
"radio"
v-model=
"msg"
value=
"0"
>
<
input
type=
"radio"
v-model=
"msg"
value=
"1"
> {{msg}}
<
select
v-model=
"message"
id=
""
>
<
option
disabled
value=
""
>请选择
</
option
>
<
option
value=
"0"
>北京
</
option
>
<
option
value=
"1"
>天津
</
option
>
<
option
value=
"2"
>河北
</
option
>
</
select
>
{{message}}
<
input
disabled
type=
"text"
>
</
div
>
<
script
>
var
vm =
new
Vue({
el:
'#app',
data: {
msg:
'',
message:
''
}
})
<
/
script
>
</
body
>
</
html
>
<!-- 复选框 -->
<!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"
>
<
title
>Document
</
title
>
<
script
src=
"./vue.min.js"
>
<
/
script
>
</
head
>
<
body
>
<
div
id=
"app"
>
<
input
type=
"checkbox"
value=
"0"
v-model=
"msg"
>
<
input
type=
"checkbox"
value=
"1"
v-model=
"msg"
>
<
input
type=
"checkbox"
value=
"2"
v-model=
"msg"
>
{{msg}}
</
div
>
<
script
>
var
vm =
new
Vue({
el:
'#app',
data:{
msg:[]
}
})
<
/
script
>
</
body
>
</
html
>
4.生命周期方法
beforeCreatecreated
beforeMount
mounted // 浏览器上的内容,加载完,然后一直等待这里
beforeUpdate
updated // 修改数据,会自动调用该方法
beforeDestroy // 程序被杀死前的的遗言
destroyed // 程序被杀死后
<!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"
>
<
title
>Document
</
title
>
<
script
src=
"./vue.min.js"
>
<
/
script
>
</
head
>
<
body
>
<
div
id=
"app"
>
{{msg}}
</
div
>
<
script
>
var
vm =
new
Vue({
el:
'#app',
data:{
msg:
'hello wolrd'
},
beforeCreate () {
console.
log(
'beforeCreate')
},
created () {
console.
log(
'created')
},
beforeMount () {
console.
log(
'beforeMount')
},
mounted () {
console.
log(
'mounted')
},
beforeUpdate () {
console.
log(
'beforeUpdate')
},
updated () {
console.
log(
'updated')
},
beforeDestroy () {
console.
log(
'beforeDestroy')
},
destroyed () {
console.
log(
'destroyed')
}
})
<
/
script
>
</
body
>
</
html
>
5.过滤器
外置的过滤器:Vue.filter('rever', function (value) {
return value.split('').reverse().join('')
})
var vm = new Vue({
el:'#app',
data:{
msg: 'abcdefg',
title: 'ABDEEDJSOIFDOS',
flag: 'hello world'
},
内置的过滤器:
<!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"
>
<
title
>Document
</
title
>
<
script
src=
"./vue.min.js"
>
<
/
script
>
<
script
>
window.
onload =
function () {
Vue.
filter(
'rever',
function(
value){
return
value.
split(
'').
reverse().
join(
'')
})
var
vm =
new
Vue({
el:
'#app',
data:{
msg:
'abcdefsjoidijfowe',
title:
'SDJOIFSOIDFJSDOIFSFD'
},
filters: {
Upper
:
function(
value){
return
value.
toUpperCase()
},
lower
:
function(
value){
return
value.
toLowerCase()
}
}
})
}
<
/
script
>
</
head
>
<
body
>
<
div
id=
"app"
>
{{msg}}
{{ msg | Upper }}
{{title | lower}}
{{msg | rever}}
<
div
v-if=
""
></
div
>
</
div
>
</
body
>
</
html
>
6.自定义指令
外置指令:Vue.directive('fodd',{
inserted:function(el){
el.style.width = '100px'
el.style.height = '100px'
el.style.border = '1px solid gold'
}
})
var vm = new Vue({
el:'#app',
内置指令:
<!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"
>
<
title
>Document
</
title
>
<
script
src=
"./vue.min.js"
>
<
/
script
>
</
head
>
<
body
>
<
div
id=
"app"
>
<
div
v-mei
>哈哈
</
div
>
<
p
v-mei
></
p
>
</
div
>
<
script
>
var
vm =
new
Vue({
el:
"#app",
directives: {
mei:{
inserted
:
function(
el){
el.
style.
width =
'300px'
el.
style.
height =
'300px'
el.
style.
background =
'pink'
}
}
}
})
<
/
script
>
</
body
>
</
html
>
7.axios请求 数据交互
<!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"
>
<
title
>Document
</
title
>
<
script
src=
"./vue.min.js"
>
<
/
script
>
<
script
src=
"./axios.min.js"
>
<
/
script
>
<
script
>
window.
onload =
function () {
var
vm =
new
Vue({
el:
'#app',
data: {
array: []
},
methods: {
func
:
function () {
var
that =
this
axios.
get(
'http://localhost:3008/getMovieListData?message={"movieType":"in_theaters","pageIndex":2,"start":0,"count":10}'
)
.
then(
function (
response) {
// console.log(response)
vm.
array =
response.
data.
subjects
})
.
catch(
function (
error) {
console.
log(
error)
})
}
}
})
}
<
/
script
>
</
head
>
<
body
>
<
div
id=
"app"
>
<
button @
click=
"func"
>请求数据
</
button
>
<
ul
>
<
li
v-for=
"item in array"
>
{{item.title}}
</
li
>
</
ul
>
</
div
>
</
body
>
</
html
>