VUE学习笔记-1

1. vue.js是什么

1. 是一个构建用户界面的框架
2. 是一个轻量级MVVM（Mode-View-ViewModel）框架，和angular、react类似，其实就是所谓的数据双向绑定
3. 数据驱动+组件化的前端开发（核心思想）
4. 通过简单的API实现**响应式的数据绑定**和**组合的视图组件**

2. vue和angular比较

2.1 angular

• 上手较难
• 指令ng-xxx 开头
• 所有属性和方法都存储在 $sope中
• 由google维护

2.2 vue

• 简单、易学、更轻量

• 指令以v-xxx 开头

• HTML代码+JSON数据，再创建一个vue实例

• 由个人维护：**尤雨溪**，华人

3. 起步

1. 安装NodeJs  https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5
2. 初始化一个项目  npm init --yes
    
3. 安装cnpm，输入以下命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
4. 输入cnpm -v检查是否正常
   
5. 下载vue.js核心库，cnpm install vue --save
   
6. 查看vue.js 文件位置
   
7. 安装 调试vue的插件 Vue.js devtools
   在扩展程序页面，拖入 chrome文件夹
   
   
   链接：https://pan.baidu.com/s/1BlsUNUA7rpItiQ4IugFTiA 
   提取码：s2qj 
   效果如上图

配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false

<script>
    Vue.config.devtools=false; // 配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
    Vue.config.productionTip=false; // 组织vue启动时，生成生产消息
    new Vue({
        el:'#itany',
        data:{
            msgA:"helloWorld"
        }
    });
</script>

三、常用指令

vue中常用的指令 

1.  v-model  数据的双向绑定，一般用于表单元素
    注意：el 可以使用class， div 选择器，但不可以挂在 body 元素上 
   
2. v-for 对数组或对象进行循环操作
   
   对 对象list 循环
   
   键值循环
   
   当循环包含重复数据的集合，可以通过指定 :key属性绑定唯一 key，当更新元素时可重用元素时，提高效率
   
   对 对象list进行循环
   
3. v-on 用来绑定事件，用法： v-on:事件="函数"
   向arr数组中添加一个元素，并显示，使用this 访问当前实例中的成员
   
4. v-show/v-if 用来显示或隐藏元素，v-show时通过display实现，v-if是每次删除后再重新创建
   点击隐藏，再点击显示
   

四、事件绑定

1.  事件简写
   v-on:click=""  简写为 @click=""

2. 事件对象 $event
   包含事件相关信息，如事件源、事件类型、偏移量
   target、type、offsetx

   <div class="itany">
       <button @click="displayDiv">点击消失</button>
       <button @click="showDiv">点击复现</button>
       <hr>
       <div class="itany" style="width: 300px;height: 140px;background-color: azure" v-show="flag">
           效果，点击后，div消失
       </div>
       <button @click="print($event)">button text</button>
   </div>
   <script>
       new Vue({
           el:".itany",
           data:{
              flag:true
           },
           methods:{ // 存储方法
               displayDiv:function () {
                   this.flag=false;
               },
               showDiv:function () {
                   this.flag=true;
               },
             print(e) {
                 // 点击的事件实例
                 console.log(e.target.innerHTML);
                 // vue实例
                 console.log(this);
             }
           }
       });
   </script>

3. 阻止事件冒泡
   1. 原声js，依赖于事件对象
   2. vue方式，不依赖于事件对象  @click.stop=""

   <div @click="close">
        <button @click.stop="print">测试事件冒泡</button>
      </div>

4. 阻止默认行为

   vue方式  .prevent=
   

    <a href="#" @click.prevent="close">测试阻止默认行为链接</a>

键盘事件

• enter回车： @keydown.enter 或者 @keydown.13

• 事件修饰符 @click.once 只触发一次
  

  <button type="button" @click.once="testOnce">只触发一次</button>

属性绑定和属性的简写

1. v-bind 用于属性绑定， v-bind:属性=""  简写  :属性=""
   
    

2. class和style属性 
   1) 变量形式
   
   2）应用两个样式
   
   3）json形式修改样式*（常用）
   
   4) 变量引入json形式
   
   5） style 样式
   
   ​​​​​​​