初识vue

Vue是什么?

Vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。Vue和angular类似,但是Vue的语法 用法更加精练,容易上手.vue中文网

Vue 的数据绑定

Vue的核心的功能就是双向的数据绑定.双向指的是:HTML标签数据 绑定到 Vue对象,反之也是绑定的.即HTML内容改变,vue对象的属性也会改变,反之相同.
以前的jQuery等都是以dom变化后,触发js事件来获取标签的变化,在和后台交互,从而根据后台的返回数据改变HTML标签,过程很复杂.vue出世之后,开发人员只需要关心json数据的变化,vue会自动的映射到HTML上,而HTML的变化也会映射到js对象上,开发方式变成了前端由数据驱动的方式,抛弃了dom开发主导的方式.

文字绑定 {{ }} -- 不支持html标签渲染

  <div id="app">
    {{msg}},{{count}}
  </div>

  var vm =   new Vue({
      el: '#app', // 指定选择器，作用是指定vue的作用范围
      // data属性指定我们能够在 #app 元素中使用的数据,
      // 这里的data的属性msg，count.... 最终会被赋值给new 出的Vue实例
      // 只要改变data属性值,页面中的值也会变化
      data: {
        msg: 'jun',
        count: 18
      }
    })

如果想让{{}}内容是html标签,想让其以html标签的形式显示出来,在当前元素添加 属性 v-html="data内的属性名"

属性绑定 v-bind:class="" :class=""

通过v-bind给元素设置属性,v-bind:要添加的属性名="data里的属性名" 简写方式 :要添加的属性名="data里的属性名"
v-bind 支持 data属性值传递数组或者对象. 数组传递多个属性,对象可以给值设置true/false 来设置.

• style内联方式使用样式 :style="test" data:{test:{color:'#f0f',backgroundColor:'#ff0',border:'10px solid #f00'}}
• v-if 更加data内的属性值 判断条件渲染 可以配合v-else
• v-show 和v-if类似 但是不可以配合v-else
• v-for="item in list" 列表渲染

vue事件 v-on: @:

• 内联的方式 写在标签内 v-on:click 简写 @click
  vue中所有用的方法,放在methods属性内
  @click.stop 加.stop后,就不会有冒泡了
  @click.prevent是阻止默认事件

• v-model 配合可以编辑的元素使用

  <div id="app">
    <input type="text" v-model="status">
    <input type="checkbox" v-model="isChecked">

    <hr>

    男<input name="xx" type="radio" value="0" v-model="val">
    <hr>
    女
    <input name="xx" type="radio" value="1" v-model="val">
  </div>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data:{
        status: 'v-model',
        isChecked: false,
        val: 0
      }
    })
  </script>

• 过滤器
  Vue中的filters对象的属性就是过滤器

{{time||coverttime}}
 filters: {
          // val的值就是过滤器｜线前的值
          coverttime: function(val){
          // filter时无法通过this来得到data的属性
          console.log(val)
          // console.log(this)
          var dt = new Date(val)
          // 最终这里的返回值，就是页面使用这个过滤器位置要显示的值
          return dt.toLocaleDateString()
        }   

组件

  <div id="app">
    <my-btn></my-btn>
  </div>

  // 定义(注册)一个组件
  // component// 组件
  // 第一个参数，给组件起个名字，我们最终会在html中以标签的形式来使用这个组合
  // 第二个参数，是个对象，要包含组件的内容,html,js数据。。
  Vue.component('my-btn',{
    // template属性指定组件的内容
    template: '<div id="是不是我"><button>漂亮的组件按钮</button></div>'
    //data中数据如果写死一个data:{} 那么这个组件在复用时操作的是同一数据,会导致每一个组件都是一样的.
    //data:function(){
          //函数每次调用时,内部变量被重新申明,是全新的变量,避免相同重复.  
    //}  
    methods:{方法}
    filters:{} 过滤器
})
    var vm = new Vue({
      el: '#app'
    })