1.实例化Vue
var vm = new Vue({
// 选项
})
//----------------分割线
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000"
},
methods: {
details: function() {
return this.site + " - 学的不仅是技术,更是梦想!";
}
}
})
</script>
①在 Vue 构造器中有一个el 参数,它是 DOM 元素中的 id。
②data 用于定义属性,比如实例中有三个属性分别为:site、url、alexa
③methods 用于定义的函数,可以通过 return 来返回函数值。
④{{ }} 用于输出对象属性和函数返回值。
注:当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。
2.获取Vue自身定义的属性和方法
除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。
document.write(vm.$data === data) // true
3.Vue模板语法
理解:
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
①文本插值
数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
②使用 v-html 指令用于输出 html 代码
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鸟教程</h1>'
}
})
</script>
③在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
④HTML 属性中的值应使用 v-bind 指令
⑤指令是带有 v- 前缀的特殊属性,有v-if、v-else、v-show、v-for、v-bind、v-on、v-model