vue初识——1

因为一些原因决定把自己学的vue的一些知识都整理一下，系统的复习一下，同时查漏补缺。
今天复习的内容

  window.onload = function(){
    var App = {
      template: `<div>
      <input type="text" v-model="message">
      {{message | rever('$')}}
      <hr>
      <button @click="change">改变stu[0].name</button>
      <hr>
      <input type="text" v-model="n1"> + 
      <input type="text" v-model="n2"> * 
      <input type="text" v-model="rate"> = {{resule}}
      </div>`,
      data: function(){
        return {
          message: '',
          stu: [{name: 'lucy'}],
          n1: '',
          n2: '',
          rate: ''
        }
      },
      methods: {
        change () {
          this.stu[0].name = 'lihiohg'
        }
      },
      filters: {
        rever: function(dataStar,rsa){
          return rsa + ':' + dataStar.split('').reverse().join('')
        }
      },
      watch: {
        message: function(newV, oldV){
          console.log(newV, oldV)
        },
        stu: {
          deep: true,
          handler: function(newV, oldV){
            console.log("you change this.stu[0].name")
            console.log(newV, oldV)
          }
        }
      },
      computed: {
        resule: function(){
          return ((this.n1-0) + (this.n2-0)) * (this.rate)
        }
      }
    }
    new Vue({
      el: "#app",
      components: {
        app: App,
      },
      template: '<app/>'
    })
  }

• v-bind和v-model
  单项数据绑定（vue->html）和双向数据绑定(vue->html->vue)
  这个例子一般都是用两个input框在加一个span来验证

<input type="text" :value="message">
<input type="text" v-model="message">
 {{message}}

这样就可以很明显的看出来两者的区别了。

• 组件封装
  components和component：分为子组件和全局组件
  父组件调用子组件
  先有子—var App= { }
  声明子—components: { app: App }
  使用子—template: ‘<app ./>’
  父组件向子组件传递数据
  父传子—使用属性的方式传递
  子声明—props:[ ‘title’ ]
  子使用—{{title}}

window.onload = function(){
        var Son = {
            template: `
            <div>
            接收到父组件的数据是 {{title}}
            <h1 v-if="seen">1</h1>
            <h1 v-show="seen">2</h1>
            <ul>
            <li v-for="stu in [{name: 'zhangsan'},{name: 'lisi'}]">
            {{stu.name}}</li>
            </ul>
            <button @click="change">click me</button>
            <hr>
            <input type="text" :value="text"><br />
            <input type="text" v-model="text"><br />
            <span>{{text}}<span>
            </div>`,
            props: ['title'],
            data:function () {
                return {
                    seen: true,
                    text: "hello"
                }
            },
            methods: {
                change () {
                    this.seen = !this.seen
                }
            }
        };
        var App = {
            components: {
                son: Son
            },
            template: `
            <div>
            <son :title = "xxx"></son>
            </div>
            `,
            data: function () {
                return {xxx: "abc"}
            }
        };
        new Vue({
            el: '#app',
            components: {
                app: App
            },
            template: '<app/>'
        })
        
    } 

-过滤器
filter和filters：分为子过滤器和全局过滤器
{{待处理数据 | 过滤器名称}}
过滤器名称中可以传递参数，
filters: {
过滤器名称：function（data，参数1，参数2）{
return 编写你想实现的效果
}
}
在第一段长代码里面有，这里就不重复写了
全局过滤器和全局组件的写法是一样的

• 监视器——单个监视和整体监视
  watch——单个监视

watch: {
        message: function(newV, oldV){  //浅层监视，直接监视被监视的变量
          console.log(newV, oldV)
        },
        stu: {       //深层监视   使用deep  
          deep: true,
          handler: function(newV, oldV){
            console.log("you change this.stu[0].name")
            console.log(newV, oldV)
          }
        }
      }

深层监视一般都是监视数据类数据，因为在监视时，监视的是对象的地址，但是数组数据改变时，数组本身的地址是没有改变的，改变的是属性值，所以直接使用浅层监视会导致监视失败。
简单数据用watch监视，复杂数据用深层监视

• 整体监视——computed
  computed：{
  监视业务名：function（）{return }}

<input type="text" v-model="n1"> + 
      <input type="text" v-model="n2"> * 
      <input type="text" v-model="rate"> = {{resule}}


computed: {
        resule: function(){
          return ((this.n1-0) + (this.n2-0)) * (this.rate)
        }
      }

写的时候有些功能过滤器也可以实现监视器的效果，但是最好还是将过滤器写的简单一些，毕竟过滤器指的就是将一组数据变为另一组数据
写的时候注意缓存问题

options：根属性
el：目的地可以使用string也可以使用Dom
template：模板
data：一个函数，return一个对象，对象中的key可以直接在页面中使用 this.xxx
components：key组件名，value组件对象
methods：配合事件使用
props：子组件接受参数时设置，数组
v-if：v-show 元素的插入移除和判断元素是否显示
v-if：v-else 使用时必须相邻使用
v-bind：v-on 为属性赋值 对事件绑定
v-bind：v-model 单向数据流 双向数据流

今天复习的都是最基础的东西，但是既然是复习，还是打算从最简单的复习