通过前一段时间基础的学习,笔者最近将会持续更新关于vue的优质文章,也会坚持输出,但是自我感觉不是很好,所以在一个月黑风高的夜晚,决定撰写这个系列,希望大家可以多多的支持我哦.如果文章有什么错误的地方,希望读者可以及时指正,我也会第一时间进行修改.最后,感谢各位读者们~~
vue.png**

1.vue框架介绍

既然是学习vue.js那么首先就应该知道vue.js到底是什么,在这里笔者就不多做解释了,因为现在官方文档说的是十分清楚,所以我们可以来看下官方的解释,至少笔者觉得官方说的很清楚,哈哈哈

Vue (读音 /vjuː/，类似于 ``**view**``) 是一套用于构建用户界面的``**渐进式框架**``。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.框架和库的区别

  • js库: js库就是对某个功能的封装, 小而巧, 对项目的侵入性不是特别大, 我们需要主动调用库文件所提供的功能代码实现特定业务功能
  • 框架: 大而全, 对整个项目的侵入性比较大, 框架的功能更完善, 会提供项目最基本的目录结构, 我们只需要将对应的代码放在框架约定的文件或者目录中, 框架在特定的时间会调用我们的代码

2.1-特点

  • 入门门槛比较低
  • 数据驱动视图更新
  • vue中不建议操作dom
  • 基于组件化的开发方式

3-下载以及安装

  • 手动下载
  • 通过npm在线下载javascript npm i vue -S // 或者 npm install vue --save

4-vue基础语法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <!-- 1-引入vue.js -->
  8.     <script src="./libs/vue.js"></script>
  9. </head>
  10. <body>
  11.     <!-- 2-容器 -->
  12.     <div id="app">
  13.         <!-- 插值表达式: 特殊的占位符 -->
  14.         <h1>{{pageTitle}}</h1>
  15.         <hr>
  16.         <h3>{{msg}}</h3>
  17.     </div>
  18. </body>
  19. <!-- 3-书写逻辑代码 -->
  20. <script>
  21. // 创建实例对象
  22. const vm=new Vue({
  23.     // 模板容器的id
  24.     el:'#app',
  25.     // 定义数据
  26.     data:{
  27.         pageTitle:'网站首页',
  28.         msg:'hello vue'
  29.     }
  30. });
  31. </script>
  32. </html>

5-插值表达式

  1. <div id="app">
  2.     <!-- 插值表达式: 特殊的占位符 -->
  3.     <!-- 字符串连接 -->
  4.     <h1>{{pageTitle+'~~~'}}</h1>
  5.     <hr>
  6.     <!-- 调用系统方法 -->
  7.     <h3>{{msg.toUpperCase()}}</h3>
  8.     <hr>
  9.     <!-- 调用自定义方法 -->
  10.     <h3>{{reverse(msg)}}</h3>    
  11.     <hr>
  12.     <!-- 条件判断: 三元表达式 -->
  13.     <h3>
  14.         {{age>=18?'恭喜您, 终于成年了':'好好享受美好的童年'}}
  15.     </h3>
  16.     <hr>
  17.     <!-- 数学运算 -->
  18.     <h3>{{age+10}}</h3>
  19. </div>
  1. // 创建实例对象
  2. const vm=new Vue({
  3.     // 模板容器的id
  4.     el:'#app',
  5.     // 定义数据
  6.     data:{
  7.         pageTitle:'网站首页',
  8.         msg:'hello vue',
  9.         age:17
  10.     },
  11.     // 定义方法
  12.     methods:{
  13.         // 实现字符串翻转
  14.         reverse(str){
  15.             return str.split('').reverse().join('');
  16.         }
  17.     }
  18. });

6-指令

  • 指令: 是vue中的一种特殊的语法, 指令的本质其实是一个特殊的函数, 这个函数的调用方式比较特殊, 当做自定义属性来调用
  • 语法: 当做自定义属性使用

6.1-v-text

  • 作用: 在模板中输出变量
  • 语法: 当做自定义属性使用
  • 特点: 只会原样输出变量中的内容, 不会对标签进行解析```html 

    1. ```javascript
    2. // 创建实例对象
    3. const vm=new Vue({
    4.   // 模板容器的id
    5.   el:'#app',
    6.   // 定义数据
    7.   data:{
    8.       pageTitle:'网站首页',
    9.       msg:'hello vue',
    10.       age:17
    11.   },
    12.   // 定义方法
    13.   methods:{
    14.       // 实现字符串翻转
    15.       reverse(str){
    16.           return str.split('').reverse().join('');
    17.       }
    18.   }
    19. });

6.2-v-html

  • 作用: 在模板中输出变量
  • 特点: 解析变量中的标签
  • 案例```html 

    1. ```javascript
    2. // 创建实例对象
    3. const vm=new Vue({
    4.   // 模板容器的id
    5.   el:'#app',
    6.   // 定义数据
    7.   data:{
    8.       pageTitle:'网站首页',
    9.       content:`
    10.           <h1>新闻标题</h1>
    11.           <hr/>
    12.           <p>新闻内容</p>
    13.       `
    14.   }
    15. });

6.3-v-bind

  • 作用: 动态指定属性值

  • 完整语法:html <div v-bind:属性名="属性值"></div>

  • 简写语法html <div :属性名="属性值"></div>

  • 案例```html vue基础入门【一】 - 图2

    1. ```javascript
    2. // 创建实例对象
    3. const vm=new Vue({
    4.   // 模板容器的id
    5.   el:'#app',
    6.   // 定义数据
    7.   data:{
    8.       url:'./imgs/28.png'
    9.   }
    10. });

6.4-v-show

  • 作用: 控制元素的显示和隐藏
  • 可选值: true(显示), false(隐藏)

  • 语法html <div v-show="true"></div>

  • 控制元素隐藏的原理: 通过css的方式实现元素隐藏, display:none

  • 应用场景: 频繁切换显示状态, 建议选择v-show, 性能开销更小
  • 案例```html vue基础入门【一】 - 图3
    1. ```javascript
    2. // 创建实例对象
    3. const vm=new Vue({
    4.   // 模板容器的id
    5.   el:'#app',
    6.   // 定义数据
    7.   data:{
    8.       url:'./imgs/28.png',
    9.       isShow:true
    10.   }
    11. });

6.5-v-if

  • 作用: 控制元素的显示和隐藏
  • 可选值: true(显示), false(隐藏)

  • 语法html <div v-if="true"></div>

  • 控制元素隐藏的原理: 销毁DOM

  • 应用场景: 如果不是频繁切换显示状态, 可以使用v-if
  • 组合指令
    • v-else-if: 不能单独使用, 必须v-if结合起来使用
    • v-else: 不能单独使用, 必须v-if结合起来使用, 不需要指定条件
  • 案例```html

    不及格

    及格

    良好

    优秀

    成绩不合法

    1. ```javascript
    2. // 创建实例对象
    3. const vm=new Vue({
    4.   // 模板容器的id
    5.   el:'#app',
    6.   // 定义数据
    7.   data:{
    8.       // 60>score>=0: 不及格
    9.       // 60<=score<=70 及格
    10.       // 70<score<80  良好
    11.       // 80<=score<=100 优秀
    12.       // 否则: 成绩不合法
    13.       score:90
    14.   }
    15. });

6.6-v-on

  • 作用: 注册事件

  • 语法html <div v-on:事件名称="事件处理函数"> </div>

  • 简写html <div @事件名称="事件处理函数"> </div>

  • 案例```html 

    1. ```javascript
    2. // 创建实例对象
    3. const vm=new Vue({
    4.   // 模板容器的id
    5.   el:'#app',
    6.   // 定义数据
    7.   data:{
    8.      msg:'hello'     
    9.   },
    10.   // 定义方法
    11.   methods:{
    12.       handle:function(){
    13.           // 调用其他方法
    14.           this.log();
    15.           alert('点击事件处理函数执行了:'+this.msg);
    16.       },
    17.       log(){
    18.           console.log(new Date().toLocaleDateString());
    19.       }
    20.   }   
    21. });

6.7-v-once

  • 作用: 当在某个标签上使用了v-once, 那么vue只会对当前的标签编译一次, 如果过标签中引用的数据发生了更新, 视图是不会刷新的

  • 语法html <div v-once>{{msg}}</div>

  • 案例```html

    没有使用v-once指令:{{msg}}

    使用了v-once指令:{{msg}}

    1. ```javascript
    2. // 创建实例对象
    3. const vm=new Vue({
    4.   // 模板容器的id
    5.   el:'#app',
    6.   // 定义数据
    7.   data:{
    8.      msg:'hello'  
    9.   },
    10.   // 定义方法
    11.   methods:{
    12.       update(){
    13.           // 更新msg
    14.           this.msg='你好'
    15.       }
    16.   }   
    17. });

6.8-v-for

  • 作用: 循环输出

  • 基础语法html <h1 v-for="模板变量 in 目标数据">{{模板变量}}</h1>

  • 案例

    • 循环遍历数组```html

      {{index}}-{{item}} 

      1. ```javascript
      2. new Vue({
      3. data:{
      4.    arr:['vue','react','angular']
      5. }
      6. });

    • 循环遍历对象```html

      {{index}}—-{{key}}—-{{item}}

      1. ```javascript
      2. new Vue({
      3. data:{
      4.    user:{
      5.        nickname:'jack',
      6.        age:20,
      7.        sex:'男'
      8.    }
      9. }
      10. });

    • 循环遍历数值html <h1 v-for="(item,index) in 5">{{index}}---{{item}}</h1>

    • 循环遍历字符串html <h1 v-for="(item,index) in 'hello'">{{index}}---{{item}}</h1>

  • key属性

    • 保证key属性的值, 唯一不重复
    • 一般而言, key属性需要一个数值或者字符串作为他值
    • 在数据和视图层建立一个一一对应关系, 方便进行状态保持

key属性的作用.jpg

  1. <table border="1" width="400" height="300">
  2.     <tr>
  3.         <td></td><td>id</td><td>姓名</td>
  4.     </tr>
  5.     <!-- key: 
  6.     一般需要动态绑定
  7.     保证key属性的值, 唯一不重复
  8.     一般而言, key属性需要一个数值或者字符串作为他值
  9.     作用: 在数据和视图层建立一个一一对应关系, 方便后期进行局部更新
  10.     -->
  11.     <tr v-for="item in list" v-bind:key="item.id">
  12.         <td><input type="checkbox"></td>
  13.         <td>{{item.id}}</td>
  14.         <td>{{item.name}}</td>
  15.     </tr>
  16. </table>
  1. new  Vue({
  2.     el:'#app',
  3.     data:{
  4.         list:[
  5.             {id:4,name:'jack'},
  6.             {id:3,name:'pony'},
  7.             {id:2,name:'robin'},
  8.             {id:1,name:'charlse'}
  9.         ]
  10.     }
  11. });

7-样式的设置

7.1-动态设置style

  • 普通写法```html 

    1. ```javascript
    2. new Vue({
    3.   el:'#app',
    4.   data:{
    5.       styleObj:{
    6.           width:'100px',
    7.           height: '100px',
    8.           backgroundColor:'aqua'
    9.       },
    10.       // 中间变量: true表示要添加样式, false表示不需要添加样式
    11.       flag:false
    12.   },
    13.   methods:{
    14.       toggleStyle(){
    15.           // 更新中间变量flag的值
    16.           this.flag=!this.flag;
    17.       }
    18.   }
    19. });

  • 数组写法```html 

    1. ```javascript
    2. new Vue({
    3.   el:'#app',
    4.   data:{
    5.       // 样式对象
    6.       styleObj1:{
    7.           width:'100px',
    8.           height: '100px',
    9.       },
    10.       styleObj2:{
    11.           backgroundColor:'aqua'
    12.       },
    13.       // 控制尺寸样式
    14.       hasSize:false,
    15.       // 控制背景样式
    16.       hasBg:false
    17.   },
    18.   methods:{
    19.       // 切换尺寸
    20.       toggleSize(){
    21.           this.hasSize=!this.hasSize; 
    22.       },
    23.       // 切换背景
    24.       toggleBg(){
    25.           this.hasBg=!this.hasBg; 
    26.       }
    27.   }
    28. });

7.2-动态设置class

  1.  .border{
  2.      border:4px solid green;
  3.  }
  4. .size{
  5.     width: 200px;
  6.     height: 200px;
  7. }
  8. .bg{
  9.     background-color: brown;
  10. }
  11. .font{
  12.     font-size: 40px;
  13.     font-weight: 700;
  14.     text-align: center;
  15. }
  1. new  Vue({
  2.     el:'#app',
  3.     data:{
  4.         // 保存css选择器的变量
  5.         border:'border',
  6.         size:'size',
  7.         bg:'bg',
  8.         font:'font',
  9.         // 中间变量
  10.         hasBorder:false,
  11.         hasSize:false,
  12.         hasBg:false,
  13.         hasFont:false
  14.     },
  15.     methods:{
  16.         toggle(attr){
  17.            this[attr]=!this[attr];
  18.         }
  19.     }
  20. });

  • 普通写法html <div :class="border+' '+size+' '+bg"> hello </div>

  • 数组写法html <div :class="[hasBorder?border:'',hasSize?size:'',hasBg?bg:'',hasFont?font:'']"> hello </div>

  • 对象写法html <div :class="{border:hasBorder,size:hasSize,bg:hasBg,font:hasFont}"> world </div>

8-关于tab切换的案例```html

内容1
内容2
内容3
内容4 

  1. ```javascript
  2. new  Vue({
  3.     el:'#app',
  4.     data:{
  5.         // 当前需要默认显示的内容块
  6.         current:1
  7.     },
  8.     methods:{
  9.         tab(index){
  10.             // 更新current
  11.             this.current=index;
  12.         }
  13.     }
  14. });

9-结尾

今日份分享就到这里了,如果觉得本篇文章对您有用的话，可以麻烦您给笔者点亮那个点赞按钮。您的支持将是我继续写文章前进的动力，我们下篇文章见。奥利给
zan.jpg