vue相关笔记

官方文档：https://cn.vuejs.org/v2/guide/

第一个例子：

<div id="test">
    {{ aa }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el : "#test",
        data:{
            aa :"2266"
        }
    })
</script>

元素id可通过el:"#id"   如果是class可以通过  .class方式

vue指令：
1、v-text： 设置标签内容，默认替换全部内容，可以是用{{xxx}} 方式替换局部

<div id ="test" v-text="message">
    {{message}}1111
</div>

<script>
    var vm = new Vue({
        el : "#test",
        data : {
            message : "myinfo"
        }
    })
</script>

2、v-html：内容可以包含html结构
3、v-on：事件==》<input type="button" value="事件绑定" v-on:事件="方法"》  也可使用  @事件  方式
　　事件有：click  mouseenter  dbclick   
事件修饰符：当我们敲击键盘哪个键时触发：@keyup.enter   不止只有enter可参考https://cn.vuejs.org/v2/api/#v-on
例子：

<div id ="test" >
   <input type="button" value="事件绑定" v-on:click="myClick"/>
</div>

<script>
    var mytest = new Vue({
        el:"#test",
        methods:{
            myClick:function(event){
                  alert("你点击我了！！！")
            }
        }
    })
</script>

计数器例子：

<div id="app">
  <div class="input-num">
    <button @click="sub">-</button>
    <span>{{num}}</span>
    <button @click="add">+</button>
  </div>
</div>

<script>
  var mytest = new Vue({
    el : "#app",
    data : {
      num : 1
    },
    methods : {
      add : function () {
        if(this.num>=10){
          alert("到10 了，不能加了")
        }else{
          this.num++
        }
      },
      sub : function () {
        if(this.num<=0){
          alert("不能再减了")
        }else{
          this.num--
        }
      }
    }
  })
</script>

4、v-show:切换元素的显示和隐藏（改变的是display）
　　<img src=".." v-show="data中的属性名称">默认显示
5、 v-if:切换元素的显示和隐藏（dom元素）
　　  跟v-show差不多  但是v-if是元素直接消失

6、 v-bind:设置元素属性（src，title等等）

<div id="app">
  <input type="button" v-bind:value="mytitle"/>    也可使用   :value  方式
</div>

new Vue({
  el:"#app",
  data:{
    mytitle:"title"
  }
})

7、v-for:

 

 

<div id="app">
    <ul>
        <li v-for="item in arrInfo">   （item,index） in arrInfo
            城市：{{item}}===》可以通过item.属性方式访问对象数组
        </li>
    </ul>
</div>

var vm = new Vue({
    el:"#app",
    data:{
        arrInfo:["北京","上海","广州","福州"]
    }
})

8、v-on补充:可以通过（x,y）方式传递参数
9、v-model:获取和设置表单元素的值（双向数据绑定，也就是表单数据和vue数据可以同步更新）