Vue模版基础语法(Vue笔记:一)
Vue模版的作用:
- 结合模版中的变量和Vue实例的data实现改变数据改变视图(
单向绑定
)
Vue模版的基础语法:
#app
元素内部才能使用Vue语法{{数据}}
在Vue模版中数据写在{{}}内,可以与Vue实例data中的数据实现单向绑定,数据改变视图改变
{{数据}}可为以下类型
1: html" title=js>js 数据
2: 表达式 输出表达式运行结果
3: 三元运算符 运算结果
4: data中的key的vlaue
5: methods中函数执行的return返回值el
: Vue实例下的对象,value填要挂载的DOM对象如#appdata
: Vue实例下的对象,value是Vue中要使用的数据,可以与模版中的{{数据}}实现单向绑定(即数据改变视图也随着改变)methods
: Vue实例下的对象,value是自定义html" title=vue>vue中需要的函数,在methods中可以通过this.value
获取Vue实例中data下的变量
html"><!-- Vue模版 #app内的内容 -->
<!-- 只有#app内部才能使用html" title=vue>vue的语法 -->
<div id="app">
<!-- {{模版语法}} -->
<h1>{{'i am 爆料称'}}</h1>
<h2>{{message}}</h2>
<h3>{{1+1}}</h3>
<h4>{{ num === 1 ? "正确": "错误"}}</h4>
<h5>{{foo()}}</h5>
{{tzof}}
</div>
<script>
// 实例化html" title=vue>vue对象
// 参数为对象
var app = new Vue({
// 选择器,作用指定html" title=vue>vue中根标签,被选中的元素内部可以使用html" title=vue>vue的模版语法
// 注意:最好#id选中模版
// 注意:一个页面推荐只选中一个模版
el: '#app', // 类似于document.querySelector('#app')
// data中指定app模版所需要的数据
data: {
message: 'Hello Vue!',
num: 1,
tzof: "i'm tzof",
},
// 自定义html" title=vue>vue中需要的函数
// methods作用定义页面中需要的函数
// 赋值对象。对象中key都是自定义的函数
methods: {
foo(){
return 'foo执行';
},
look(){
console.log(this.message)
},
}
})
</script>
(Vue笔记:一 date:2021-03-05)