vue

<!--找到盒子对象,找到变动数据;不是data里面的数据都要在双引号内部打单引号-->

<!--监控(watch)和过滤(filters)都是用的data里面的键,计算(computed)是在计算里面创建的.-->

一  Vue的基本使用(写在获得的盒子对象后面)
    <script>
        var app = new Vue({
            //获取标签
            el: "#app",
            //变动数据
            data{
                str1: "hello world"
            },
            methods: {
                add: function(){
                }
            }
        })
    </script>

二   Vue的模板语法:
  a>>{{}}要显示的动态数据放里面,写在标签的内部;
  b>>控制标签属性      :标签属性=""  (三目运算符取)
  c>>给标签添加事件     @click="函数名"

三   Vue控制类名(bool1?'atalk':'btalk')

四   v-if的渲染(写在标签中,控制标签是否被渲染)
 1、语法格式:
   <div v-if="bool1">1111</div>
   <div v-if-else="bool2">2222</div>
   <div v-else>3333</div>

五   列表和对象的渲染(将列表中的元素循环放到标签(li\td)的内容中)
 格式:
    <ul>
        <li v-for="(i,j) in list1"> {{i}}{{j}} </li>
    </ul>
 注意: i为列表的元素或对象的值;j为列表元素的下标或对象的键

六   表单数据绑定(绑定value值)
 格式:
    <input type="text" v-model="v1">  //v1来自于data中的键
 双向绑定:
    input的value值改变v1也改变;v1改变input的value值也改变

七   单选框和复选框的数据绑定
 1 单选框v-model的值保存表单元素的value,格式如下:
    <input type="radio" v-model="gender" id="man" value="man"><label for="man">男</label>
    <input type="radio" v-model="gender" id="woman" value="woman"><label for="woman">女</label>

 2 复选框v-model的值是一个列表，可以保存多个value值,格式如下:
   <input type="checkbox" v-model="hobbies" id="code" value="code"><label for="code">敲代码</label>
   <input type="checkbox" v-model="hobbies" id="movies" value="movies"><label for="movies">看电影</label>
 3 注意:
    单选框和复选框中的v-model都是等于data中的键,所有单选框的v-model一样,所有复选框的v-model都一样,值里面对应的value值表示默认选的.

八   事件冒泡和默认提交
   阻止事件冒泡   @click.stop=""
   阻止默认提交   @click.prevent=""
   去除两边空格   v-model.trim="text1"

九   计算属性
  格式:
    computed: {
        //不是函数调用,不能打括号,不能有形参
        strRevs: function(){
            return 返回值
        }
     }

十   监听属性
  watch: {
      //监控的是data里面的数据,变化了就会被触发
      num: function(){
                console.log("num发生了变化!");
          }
   }

十一  过滤器(给数据添加格式)
  {{num | yuan}}
  1  一般过滤器:
    >>格式:
        filters:{
            //v接收num(默认传入)
            yuan: function(v){
                    return v+"元"
            }
         }

  2   全局过滤器(写在所有Vue变量前面):
    >>格式:
        Vue.filter("yuan", function(v){
            if(v==0){
                return v
            }
            return v + "元"
        })

十二  数据交互
  1     jquery:
    $.ajax({
        url: "/index_data.html",
        type: "GET",
        dataType: 'json',
        success: function(resp){
            console.log(resp);
        },
        error: function(){
            console.log("请求失败!")
        }
    })

   2    Vue
     var vm = new Vue({
        el: "#show_info",     //绑定标签
        data: {               //准备列表接收数据
            list1: []
        },
        mounted: function(){    //数据加载完毕后执行
            axios({
                method: "get",
                url: "index_data.html"
            }).then(function(resp){
                    vm.list1 = resp.data;
            }).catch(function(){
                alert("请求失败!")
            })
        }
     })