vue的初步使用

• Vue.js是什么？
  • Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架
• 有在线引用在cdn，本地引用
• 基础写法
  • var vm=new Vue({//构造器
    • el:'#ID', // DOM 元素，挂载视图模型 挂载
    • data:{}, // 定义属性，并设置初始值, 有两种定义方式，对象和函数
    • methods:{} // 定义方法，用于事件交互时使用的函数
  • })

  • 

• v-model 双向绑定
• v-once 单向绑定
• @click="事件"
• v-html=""会运行标签 ,样式也会有
• v-text=""和普通的没区别
• <li v-bind:id="'list-'+num">我的Id是js动态生成的</li> num定义的属性

  • 

• v-show="false" 不显示
• v-if 和 if一样
• v-else if 和 else if 一样
• v-else 和else 一样
  • v-else 必须在 v-if后面
• v-on:click="事件"
• v-for=" 名字 in 想要遍历的值 "
• value接收值
  • v-bind:value="值"
• 动态参数
  • <a v-bind:[attrname]="url"> ... </a>
• 过滤器
  • 全局过滤器
    • Vue.filter('filterName', function (value) {
      • // value 表示要过滤的内容
    • });
  • 局部过滤器
    • new Vue({
      • filters:{'filterName':function(value){}}
    • });

  • 

  • {{原值 | 调用函数改变值}}
• v-bind:class 样式绑定

  • 

• 事件修饰符
  • Vue通过由点(.)表示的指令后缀来调用修饰符，（可以多个一起使用）
    • .stop
      • <!-- 阻止单击事件冒泡 -->
        • <a v-on:click.stop="doThis"></a>
        • 冒泡：你点的事件外层还有事件也会触发，就类似于从水中冒出的泡泡，（不能从外层扩散到内层）

          

    • .prevent
      • <!-- 提交事件不再重载页面 -->
        • <form v-on:submit.prevent="onSubmit"></form>
        • 不会刷新页面
    • .capture
      • <!-- 添加事件侦听器时使用事件捕获模式 -->
        • <div v-on:click.capture="doThis">...</div>
    • .self
      • <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
        • <div v-on:click.self="doThat">...</div>
    • .once
      • <!-- click 事件只能点击一次 -->
        • <a v-on:click.once="doThis"></a>
• 按键修饰符（点某一个按键触发事件）
  • Vue为最常用的按键提供了别名
    • <input v-on:keyup.按键别名="submit">
    • 全部的按键别名：
    • .enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right .ctrl .alt .shift .meta
• 修饰符
  • .lazy
    • 默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步
  • .number
    • 将用户的输入值转为 Number 类型
  • .trim
    • 自动过滤用户输入的首尾空格
• 表单(放入在一个div中id为app)
  • 文本框<input type="text" v-model="name" />
  • 文本框<input type="text" v-model="age" />
  • 密码框<input type="password" v-model="pwd"/>
  • 文本域<textarea v-model="remark"></textarea>
  • 隐藏域<input type="hidden" v-model="id"/>
  • 多选复选框
    • <div v-for="a in hobby">
      • <input type="checkbox":value="a"/>
    • </div>
  • 单选按钮
    • <div v-for="b in sex">
      • <input type="radio":value="b" name="sex"/>
    • </div>
  • 下拉框
    • <select>
      • <option v-for="item in address":value="item"></option>
    • </select>

  •