vue文件页面结构

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.baidu.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 我爱学习！";
            }
        }
    })
</script>

结果展示
site：前端学习
url：www.baidu.con
前端学习-我爱学习！

1、{{ }} 用于输出对象属性和函数返回值。

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>

2、在 Vue 构造器中el 参数是 DOM 元素中的 id，在在 div 元素中 id 为 vue_det，这意味着接下来的改动全部在以上指定的 div 内，div 外部不受影响。
3、data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
4、methods 用于定义的函数，可以通过 return 来返回函数值

实例分析

<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>

1、split(’’) 会把数据拆分为一个数组，括号里的 ‘’ 是把数据拆分为每个字符串的意思，如果不用就不会拆分成每个字符串；reverse() 是翻转的意思，把数据反过来（只对数组有效）；join(’’) 是重组的意思，把数组合成一个字符串。
2、实例中声明了一个计算属性 reversedMessage ，提供的函数将用作属性 vm.reversedMessage 的 getter ，vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

var cnt=1;
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      cnt+=1;
      return cnt+this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      cnt+=1;
      return cnt+this.message.split('').reverse().join('')
    }
  }
})

运行结果
原始字符串: Runoob!
计算后反转字符串: 2!boonuR
计算后反转字符串: 2!boonuR
使用方法后反转字符串: 3!boonuR
使用方法后反转字符串: 4!boonuR

cnt 是独立于 vm 对象的变量。在使用 reversedMessage 这个计算属性的时候，第一次会执行代码，得到一个值，以后再使用 reversedMessage 这个计算属性，因为 vm 对象没有发生改变，于是界面渲染就直接用这个值，不再重复执行代码。而 reversedMessage2 没有这个缓存，只要用一次，函数代码就执行一次，于是每次返回值都不一样

3、computed vs methods：使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。可以说使用 computed 性能会更好，但是如果不希望缓存，可以使用 methods 属性。

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}