vue.js基础

认识Vue

• 构建用户界面的渐进式框架
• 核心库是关注图层，并且非常容易学习，容易整个其他项目
• 前端核心框架

前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以期轻量易用著称，vue.js和React.js发展速度最快，AngularJS还是老大。
官网
参考
ui框架

安装Vue

安装地址

• 打开黑窗口
  • 安装node 地址
  • node -v 查看node版本
  • npm -v 查看npm版本
  • npm install nrm -g 安装nrm镜像工具
  • nrm use taobao 指定要使用的镜像源
  • nrm ls 查看当前使用的镜像
  • nrm test npm 测试网速
  • npm test taobao 测试淘宝
• 补充
  • cnpm install npm -g 升级npm
  • npm install cnpm -g 安装或者升级cnpm
  • cnpm install vue 安装稳定版本

Demo

1. 创建空项目
2. 初始化项目
   • npm init -y
   • 会出现 .json 文件 —项目信息
3. 项目中安装vue
   • npm install vue --save
   • 会出现vue文件夹
4. 创建html

      引入依赖
      <script src="node_modules/vue/dist/vue.js"></script>
   

指令

1. 插值表达式

   • 格式{ {表达式}}
     { {name}}
     • 该表达式支持js语法，可以调用 js内置函数（需返回值）
     • 表达式必须有结果
     • 可以直接获取vue示例中定义的数据或函数
       缺点：
       使用{ {}}方式在网速出现问题，在数据未加载完成时，页面会出现原始的{ {}}，加载完才显示数据
       我们称为——插值闪烁
   • v-html和v-text

     <span v-text="name"></span>
     

     • 都解决了插值闪烁问题
       区别
       v-html：可以编译标签
       v-text：只能遍历文本(安全)

2. v-model

          <input type="text" v-model="num"  />
   

   • 双向绑定

3. v-on事件绑定

      <button v-on:click="handleClick">点我</button>
      
        
   // 效果一样，@可以写事件表达式
   <button @click="num--" >-</button>
   

   • 事件 修饰符
     • .stop：阻止事件冒泡
     • .prevent：阻止默认事件发生
     • .capture：使用事件捕获模式
     • .self：只有元素自身触发事件才执行
     • .once：只执行一次

4. v-for遍历

    <ul>
      <li v-for="user in users">
      </li>
     </ul>
     ~~~
   

5. v-if判断

       <h1 v-if="show">你好</h1><!--(一次性的判断) 适合-->
       <!-- 前者是：之间删掉代码，后者是：修改css样式类实现 -->
       <h1 v-show="show">你很好</h1><!--(性能好)-->

6. v-bind

     <div v-bind:class="color">这是盒子 </div>
     缩写
     <div :class="color"> 这是盒子 </div>
   在标签内使用变量
   

7. class属性的特殊玩法

    <div :class="{red:true,blue:flase}"></div>

8. 计算属性

      <script>  
       const app = new Vue({
           el: "#app",//Vue作用的标签        
           computed: {
               birth() {
                   const day = new Date(this.birthday);
                   return day.getFullYear() + "年" + day.getMonth() + "月" + day.getDay() + "日"+day.getHours()+"时"+day.getMinutes()+"分"+day.getSeconds()+"秒"
               }
           }
       })
      </script>

9. 监控

       <scr