vue.js官网上其实介绍的很详细
看一个vue实例
完整语法
v-on:click=”doSomething”
缩写
@click=”doSomething”
<body>
<div id="root">
<div @click="handleleClick">
{{message}}
div>
<item>item>
div>
body>
//vue组件 会将它编译成vue实例
Vue.component('item',{
template:'hello world'
})
//vue实例
var vm = new Vue({
el:'#root',
data:{
message:'hello world'
},
methods:{
handleleClick:function(){
alert("hello")
}
},
})
这是一个简单的vue实例。数据和 DOM 已经被建立了关联,所有东西都是响应式的。打开浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 message 的值,上例也会相应地更新。
可以绑定元素特性
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。
<div id="app">
<div v-if="show">
用户名:<input key="username" >
div>
<div v-else>
邮箱名:<input key="password" >
div>
div>
var vm = new Vue({
el:"#app",
data:{
show:false,
}
})
我们不仅可以把数据绑定到 DOM 文本或特性,还可以绑定到 DOM 结构。此外,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/移除元素时自动应用过渡效果。
push 添加
pop 删除
shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回 undefined unshift:将参数添加到原数组开头,并返回数组的长度
splice(start,deleteCount,val1,val2,…):从start位置开始删除deleteCount项,并从该位置起插入val1,val2,…
sort(orderfunction):按指定的参数对数组进行排序
reverse:将数组反序
concat:返回一个新数组,是将参数添加到原数组中构成的
<div id="app">
<div v-for="(item,index) of userInfo">{{item}}div>
div>
var vm = new Vue({
el:"#app",
data:{
userInfo:[1,2,3,4]
}
})
<template v-for="(item,index) of list" :key="item.id">
<div>
{{item.text}}==={{index}}
div>
<span>{{item.text}}span>
template>
var vm = new Vue({
el:"#app",
data:{
list:[{
id:"1234454",
text:"hello"
},{
id:"123467",
text:"dell"
}]
}
})
userInfo:{
name:"dell",
age:21,
gender:"male",
salary:"secret"
}
<div id="app">
<div @click="handleDivClick" :class="[activated]">
hello world
div>
div>
var vm = new Vue({
el:"#app",
data:{
activated:""
},
methods:{
handleDivClick:function(){
this.isActivated=!this.isActivated;
}
}
})
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。
<div id="app">
<div>{{name+' Lee'}}div>
<div v-text="name+' Lee'">div>
<div v-html="name+' Lee'">div>
div>
var vm=new Vue({
el:"#app",
data:{
name:"<h1>Dellh1>"
}
})