Vue.js语法介绍

Vue的生命周期

component

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

注册一个全局组件语法格式如下：
Vue``.``component``(``tagName``,`` options``)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>

全局组件

所有实例都能用全局组件。

全局组件实例

注册一个简单的全局组件 runoob，并使用它：
<``div`` ``id``=``"``app``"``>``
<``runoob``>
</``runoob``>
</``div``>``
<``script``>``// 注册 Vue.component('runoob', {
template: '``<``h1``>``自定义组件!``</``h1``>``'
})
// 创建根实例
new Vue({ el: '#app' })
</``script``>

局部组件

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

局部组件实例

注册一个简单的局部组件 runoob，并使用它：
<``div`` ``id``=``"``app``"``>
<``runoob``>
</``runoob``>
</``div``>``
<``script``>``var Child = { template: '``<``h1``>``自定义组件!``</``h1``>``' }
// 创建根实例 new Vue({
el: '#app',
components: { // ``<``runoob``>`` 将只在父模板可用
'runoob': Child } })
</``script``>

prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：

prop 实例

<``div`` ``id``=``"``app``"``>``
<``child`` ``message``=``"``hello!``"``>
</``child``>
</``div``>`` ``<``script``>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: '``<``span``>``{{ message }}``</``span``>``' })
// 创建根实例
new Vue({ el: '#app' })
</``script``>

data

用于定义属性

computed

计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：

实例 1

<``div`` ``id``=``"``app``"``>``
{{ message.split('').reverse().join('') }}
</``div``>
实例 1 中模板变的很复杂起来，也不容易看懂理解。
接下来我们看看使用了计算属性的实例：

实例 2

<``div`` ``id``=``"``app``"``>``
``<``p``>``原始字符串: {{ message }}``</``p``>``
<``p``>``计算后反转字符串: {{ reversedMessage }}``</``p``>
</``div``>``
<``script``>
var vm = new Vue({ el: '#app',
data: { message: 'Runoob!' },
computed: { // 计算属性的 getter
reversedMessage: function () {
//this指向 vm 实例
return this.message.split('').reverse().join('') } } })
</``script``>

实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

watch

Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。
以下实例通过使用 watch 实现千米与米之间的换算：

实例

<``div`` ``id`` = ``"``computed_props``"``>``
千米 : ``<``input`` ``type`` = ``"``text``"`` ``v-model`` = ``"``kilometers``"``>``
米 : ``<``input`` ``type`` = ``"``text``"`` ``v-model`` = ``"``meters``"``>
</``div``>
<``p`` ``id``=``"``info``"``>``</``p``>
<``script`` ``type`` = ``"``text/javascript``"``>``
var vm = new Vue({ el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: { },
computed :{ },
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000 },
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val; } }});
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) { // 这个回调将在 vm.kilometers 改变后调用 document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue; })
</``script``>

created

  每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。例如，created 这个钩子在实例被创建之后被调用：<br />`var vm = new Vue({`<br />`data: {`<br />`a: 1`<br />`},`<br />`created: function () {`<br />`// `this` 指向 vm 实例`<br />`console.log('a is: ' + this.a)`<br />`}`<br />`})`<br />`// -> "a is: 1" `

mounted

    mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作：<br />`new Vue({`<br />` el: '#app',`<br />` data: {`<br />` totalMoney: 0,`<br />` productList: []`<br />` },`<br />` filters: {`<br />` },`<br />` mounted: function() {`<br />` //这个是钩子函数`<br />` //如果cartView函数要执行，必须先执行钩子函数`<br />` //这个钩子函数完成了对cratView函数的调用`<br />` //应该注意的是，使用mounted 并不能保证钩子函数中的 this.$el 在 document 中。为此还应该引入    Vue.nextTick/vm.$nextTick`<br />`  this.$nextTick(function () {`<br />`   this.cartView()  `<br />`  })`<br />` })`<br />` },`<br />` methods: {`<br />` //这个是要执行的函数`<br />`  cartView: function() {`<br />`  var _this = this;`<br />`  this.$http.get("data/cartData.json", {"id": 123}).then(function(res) {`<br />`   _this.productList = res.body.result.list;`<br />`   _this.totalMoney = res.body.result.totalMoney;`<br />`  });`<br />`  }`<br />`  }`<br />` }`<br />`});`

methods

用于定义的函数，可以通过 return 来返回函数值。