导语
第一步需要导入vuejs文件到页面
<script src="https://vuejs.org/js/vue.js" type="text/javascript"></script>
修改定界符
delimiters: ['[%', '%]']
双向数据绑定
<div id="app">
<input type="text" v-model="message"/>
<h2>[% message %]</h2>
</div>
<script>
new Vue({
// 修改定界符
delimiters: ['[%', '%]'],
//指定绑定的节点
el:'#app',
//保存数据
data:{
message:""
}
});
</script>
v-show
<div id="app">
<div class="error" v-show="!content">请输入内容：</div>
<textarea v-model="content"></textarea>
<input type="button" v-show="content" value="提交"/>
</div>
<script>
new Vue({
// 修改定界符
delimiters: ['[%', '%]'],
//指定绑定的节点
el:'#app',
//保存数据
data:{
content:""
}
});
</script>
事件绑定
<div id="app">
<form action="demo.html"
v-on:submit="submitForm">
<input type="submit" value="提交">
</form>
</div>
<script>
new Vue({
// 修改定界符
delimiters: ['[%', '%]'],
//指定绑定的节点
el:'#app',
//写所有的方法
methods:{
submitForm: function(e){
//废除默认行为
e.preventDefault();
alert("点我做啥？");
}
}
});
</script>
v-on:submit="submitForm"可以简写成@submit="submitForm"
e.preventDefault();这是取消默认事件的方法，也可以写到HTML中
修改后@submit.prevent="submitForm"这样写，在function中就不需要写e.preventDefault();这个方法了
组件开发
<div id="app">
<counter heading="喜欢"></counter>
<counter heading="不喜欢"></counter>
</div>
<!-- 模板 默认是不解析的 -->
<template id="counter-template">
<div>
<h1>[% heading %]</h1>
<button
@click="count += 1"
>[% count %]</button>
</div>
</template>
<script>
//自定义的组件
Vue.component('counter',{
//修改定界符
delimiters: ['[%', '%]'],
//指定模板
template:'#counter-template',
//指定外界传入的参数
props:["heading","color"],
//指定变量
data : function(){
return { count : 0 };
}
});
//实例化vue
new Vue({
// 修改定界符
delimiters: ['[%', '%]'],
//指定绑定的节点
el:'#app'
}
</script>
computed
翻译过来就是计算后的属性
computed使用场景：用于处理需要处理后的属性
<div id="app">
<input type="text" v-model="fistName"/>
[% username %]
</div>
new Vue({
// 修改定界符
delimiters: ['[%', '%]'],
//指定绑定的节点
el:'#app',
//保存数据
data:{
fistName:"li",
lastName:"si",
},
//计算后的属性
computed:{
username:function(){
return this.fistName+" "+this.lastName;
}
}
});
处理列表数据
<div id="app">
<ul>
<li v-for="task in tasks">
[% task.body %]
</li>
</ul>
</div>
new Vue({
// 修改定界符
delimiters: ['[%', '%]'],
//指定绑定的节点
el:'#app',
//保存数据
data:{
tasks:[
{body:"go to movie1",completed:true},
{body:"go to movie2",completed:true},
{body:"go to movie3",completed:false},
{body:"go to movie4",completed:true},
{body:"go to movie5",completed:true},
]
}
});
vue 要处理列表使用 v-for
后期继续更新，有问题欢迎留言！
[获取授权]
