关于vue.js小细节的使用

1.每个 Vue 应用都需要通过实例化 Vue 来实现
2.

var vm = new Vue({
    
    
        el: '#vue_det',
        data: {
    
    
            site: "你好",
            url: "https://i.csdn.net/#/uc/profile",
            alexa: "10000"
        },
        methods: {
    
    
            details: function() {
    
    
                return  this.site + " - 关注我！";
            }
        }
    })

可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。
data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
methods 用于定义的函数，可以通过 return 来返回函数值。
{ { }} 用于输出对象属性和函数返回值

Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
$data，$el

v-html 指令用于输出 html
属性中的值应使用 v-bind 指令
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素
v-bind 指令将该元素的 href 属性与表达式 url 的值绑定：

<div id="app">
    <pre><a v-bind:href="url">你好</a></pre>
</div>
<script>
new Vue({
    
    
  el: '#app',
  data: {
    
    
    url: 'https://i.csdn.net/#/uc/profile'
  }
})
</script>

input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

filters选择器:

<div id="app">
  {
    
    {
    
     message | a}}
</div>
    
<script>
new Vue({
    
    
  el: '#app',
  data: {
    
    
    message: 'runoob'
  },
  filters: {
    
    
    a: function (value) {
    
    
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

过滤器可以串联：
{ { message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：
{ { message | filterA(‘arg1’, arg2) }}

我们也可以使用 v-show 指令来根据条件展示元素：
v-show 指令

Hello!

和v-if作用类似 计算属性关键词: computed computed vs methods 我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。 可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。