vue 学习

1. vuejs 是一个实现数据双向绑定的 js 框架

2. 入门程序:
   vuejs的使用方法:
   1. 在页面中引入 vue的 js 文件
   2. 在页面中定义一个根节点<div>
   3. 在 js 代码中初始化一个 vue对象, 基于上边的根节点初始化

new vue({
  el:"#app",
  data:{
    message: "xx"    
},
  methods:{
      onClick:funcution(){
        alert("xxx");  
    }
  }

})

3. vue事件的绑定 v-on:事件名称, 也可以@事件名称 绑定事件

   • click
     v-on: click="onClick()" == @click="onClick()"
   • keydown
     v-on: keydown = "onKeyDown($event)"
     回车键: keycode=13

4. 事件修饰符:

   • stop: 阻止事件冒泡, 如果当前控件没有处理, 也不会向上传递
   • prevent: 阻止事件的默认行为, 例如: Form 表单的 submit 自动提交方法
     @submit.prevent
   • capture: 使用事件捕获模式
   • self : 只当事件在钙元素本身(而不是子元素)触发时触发

5. 按键修饰符
   对 keyDown 事件进行过滤, 只保留关心的事件 @keydown.enter
   .enter
   .tab
   .esc

6. 数据的绑定
   1. 插值 {{var}} 可以把变量的值绑定到页面, 只要变量变化页面的数值也发生变化
      插值内还可以进行简单的运算,三目运算符等 {{1+2}} {{num+1}}
   2. v-text, v-html
      可以把变量的值绑定到 dom 节点中, 区别在于 html 会对节点的 html 样式处理
      <div v-text="var"></div>
      <div v-html="html"></div>
   3. 单向绑定:
      v-bind: 属性名称=变量 <a v-bind:href="url" />
      把变量绑定到属性上 简写: <a :href="url" />
      v-bind是单项绑定, 只是把变量的值绑定到属性
   4. 双向绑定
      v-model
   5. 集合类型的绑定(list和 map)
      集合遍历: v-for, 修饰在迭代的控件上

       <ul>
              <li v-for: id in ids>{{id}}</li>
        </ul> 

       <td v-for: user in userlist>
              <tr >{{user.name}}</tr>
              <tr >{{user.pwd}}</tr>
        </td> 

6. 判断当前元素是否显示: v-if , v-show
   <div v-if="flag">通过 flag 值控制节点</div>

7. vue中实现 ajax 请求: axios
   1. 把 axios js 库引入
   2. 使用 axios 发送请求: get, post, put, delete

axios.get("/user/list?id=xx")
.then(function(response){
        //取服务端响应数据
      var data = response.data;
})
.catch(function(reason){
    console.log(reason);
})

axios.post("/user/list", {id:1, name: "zhangsan"})
.then(function(response){
    var data = response.data;
})
.catch(..)