Vue.js常用语法
数据渲染
中最常用的是{ }绑定渲染数据的div id='app '{ {消息} }
/div
var app=new Vue({ (
El : ' # APP '，
数据： {
消息： ' hello vue！'
}
() )
将data直接渲染到页面。
另一种渲染数据的方法是v-model。 使用v-model，可以轻松实现数据和页面的双向绑定div id='app-6 '
p{{ message }}/p
input v-model='message '
/div
var app6=new Vue({ (
El : ' # APP-6 '，
数据： {
消息： ' hello vue！'
}
() )
如果有v-model，就不得不提到v-text。 v-text也用于渲染页面数据，但只能用于渲染字符串div id='app-6 '
input v-text='message '
/div
另一种数据渲染用法是v-html，用于直接渲染html代码div id='app-6 '
input v-html='message '
/div
使用v-bind绑定数据div id='app-2 '
span v-bind:title='message '
停止鼠标几秒钟，在此显示动态绑定的提示信息。
/span
/div
var app2=new Vue({ (
El : ' # APP-2 '，
数据： {
消息： '页面将加载到' new Date ().toLocaleString ) '
}
() )
当然，也可以直接省略v-bind :
div id='app-2 '
span :title='message '
停止鼠标几秒钟，在此显示动态绑定的提示信息。
/span
/div
省略v-bind，直接使用：绑定数据。
使用
动态渲染
v-if动态显示页面元素div id='app-3 'p v-if='seen '现在你看到我了/p
/div
var app3=new Vue({ (
El : ' # APP-3 '，
数据： {
seen :真
}
() )
有了v-if必然少不了v-show。 v-show也可以用于动态显示页面元素。 div id='app-3 '
p v-show='seen '现在你看到我了/p
/div
v-show和v-if的区别在于，v-if在元素隐藏时直接丢弃元素，而v-show只是使用隐藏属性隐藏元素。
使用v-for循环div id='app-4 '
ol
li v-for='todo in todos '
{{ todo.text }}
/li
/ol
/div
var app4=new Vue({ (
El : ' # APP-4 '，
数据： {
todos: [
学习{text:'JavaScript'}，
学习{text:'vue '，
{ text:“整个牛项目”}
]
}
() )
事件
绑定单击事件@clickdiv id='app-5 'p{{ message }}/p
button @click='reverseMessage '反转消息/button
/div
var app5=new Vue({ (
El : ' # APP-5 '，
数据： {
message: 'Hello Vue.js！'
(，
methods: {
reverse message :功能(
this.message=this.message.split ('').reverse ) (.join ) ' ' )
}
}
() )
感谢您的关注~