vue介绍啊

声明式渲染：vue的核心是一个允许你才用一个简洁的模板语法来声明式的将数据渲染进行DOM的系统

html部分：
<div id="app">
　　{{message}}
</div>
vue部分：
var app=new Vue({
　　el:'#app',
　　data:{
　　　　message:'Hello Vue!'
　　}
})

　　除了绑定插入文本的内容，我们还可以才用这样的方式绑定DOM元素属性：

<div id="app-2">
　　<span v-bind:title="message">
　　　　Hover your mouse over me for a few seconds to see my dynamically bound title!
　　<span>
</div>
Vue部分：
var app2=new Vue({
　　el:'#app-2',
　　data:{
　　　　message:'You loaded this page on'+new Data();
　　}
})

　你看到的v-bind属性被称为指令。指带有v的前缀，表示vue提供的特殊属性，他们在渲染DOM上应用特殊的响应式行为

二、条件与循环

控制切换一个元素的显示也相当简单。

html部分
<div id="app-3">
　　<p v-if="seen">Now you see me</p>
</div>
vue部分：
var app3=new Vue({
　　el:'#app-3',
　　data:{
　　　　seen:true
　　}
})

　　当seen为false时，你会发现Now you see me消失了。

这个例子演示了我们不仅可以绑定Dom文本到数据，也可以绑定DOM结构到数据，vue提供了一个强大的国度效果系统，可以在vue插入/删除元素是自动应用国度效果。

也有其他指令，每个有特殊的功能，v-if指令可以绑定数据到数组来渲染一个列表：

<div id="app-4">
　　<ol>
　　　　<li v-for="todo in todos">
　　　　　　{{todo.text}}
　　　　</li>
　　</ol>
</div>
vue部分：
var app4=new Vue({
　　el:'#app-4',
　　data:{
　　　　todos:[
　　　　　　{text:'learn javascript'},
　　　　　　{text:'learn Vue'},
　　　　　　{text:'Bulid something awesome'}
　　　　]
　　}
})

　　三、处理用户输入

v-on绑定一个监听事件用于调用我们vue实例中定义的方法：

<div id="app-5">
　　<p>{{message}}</p>
　　<button v-on:click="reverseMessage">Reverse Message</button>
</div>
vue部分：
var app5=new Vue({
　　el:'#app-5',
　　data:{
　　　　message:'Hello World'
　　},
　　methods:{
　　　　reverseMessage:function(){
　　　　　　this.message=this.message.split('').reverse().join('')
　　　　}
　　}
})

　　在reverseMessage方法中，我们没有接触DOM的情况下更新了应用的状态，所有的DOM操作都有vue来处理，只需写代码的逻辑

vue的v-model指令，使得在表单输入和应用状态中做双向数据绑定变得非常轻巧

<div id="app-6">
　　<p>{{message}}</p>
　　<input v-model="message">
</div>
vue部分：
var app6=new Vue({
　　el:'#app-6',
　　data:{
　　　　message:'Hello World'
　　}
})

巴特西

vue介绍啊

最新文章

热门文章