Vue 学习 StudyLearning-1-基础

基本模板用法

HTML ：
<div id='vue'>
1：---------
<a >{{message}} 对应js vue data中的数据</a>
2：----------
<a v-html="mesage"> 这种形式会覆盖原有 html 中的内容</a>
3：-----------
<a v-bing="{{'属性':flag(boolean)}}"> html的属性展示</a>
----------------
4：
vue的 {{}} 内部支持 原生JS的语法

 {{5+5}}<br>
 
{{ ok ? 'YES' : 'NO' }}<br>

{{ message.split('').reverse().join('') }}
-----------
5：逻辑 令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上
 
 <p v-if="seen">现在你看到我了</p>
 
 6:
 参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
<pre><a v-bind:href="url">菜鸟教程</a></pre>

 v-on 指令，它用于监听 DOM 事件：
<form v-on:submit.prevent="onSubmit"></form>
<a v-on:click="doSomething">


7： 数据双向绑定（类似AngelaJs）

  <p>{{ message }}</p>
    <input v-model="message">
</div>

8:使用管道符 过滤器
  {{ message | capitalize }} 此例中最终展示结果应该是capitalize（）函数返回的最终值

9：Vue 提供的 操作符缩写

v-bind 缩写
 
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>



---------------
JS：

var vue=new Vue({
    
    el':'唯一确定 属性节点 eg:#id、.class'
    'data':{
    //节点数据
    'seen': true,
    'message':'数据内容'
        ...
    },
      methods: {//定义 Vue 中可以使用的自定义函数
          fun1:function(){
              定义函数
          }
      },
    filters: {//定义过滤条件
        capitalize: function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
    }
});