Vue，一个强大的前端框架(基础知识和用法)

kingarst

已于 2022-05-06 21:47:19 修改

阅读量997

点赞数

分类专栏： # vue 文章标签： vue.js 前端框架 javascript

于 2022-05-04 11:44:10 首次发布

本文链接：https://blog.csdn.net/weixin_44152684/article/details/124568004

版权

vue 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

是什么：vue官网。vue是一个渐进式的javascript框架

渐进式: 逐渐按需添加, 想用什么就用什么, 不必全都使用

vue的特点：①渐进式 ②数据驱动视图 (响应式) ③组件系统

1、创建项目

1.1 创建命令

命令：vue create vuecli-demo

vue和create是命令, vuecli-demo是文件夹名

1.2 目录结构

创建vue项目后会会生成一个目录结构，下面为结构说明：

1.3 运行流程（运行基础）

2、正式学习

2.1 插值表达式

vue有一个最基本的功能：数据渲染。将数据（变量，或者利用ajax从后端获取到的数据）展示到页面上。

这里它不会直接操作dom，而是有自己的语法。

<template>
  <div>
    //这里{{name}}就是差值表达式
        <td>{{ name }}</td>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name:"小花",
    };
  },
  methods: {
    delbtn(e) {
      this.list.splice(e.target.getAttribute("delid"), 1);
    },
  },
};
</script>

2.2 指令

vue提供了指令（directive）功能，这些指令都是以v-开头(例如：v-for )，它们从形式上来看是标签的自定义属性（只不过是由vue提供的）。

1、v-bind

作用：动态绑定标签上的属性的值（只要在标签上，变量作为属性值就需要用到v-bind）

语法：

<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素> // 简写, 省略v-bind <元素 :属性名1="值1" :属性名2="值2"></元素>

注意：v-bind:可以简写为：

2、v-for

作用：列表渲染, 所在标签结构, 按照数据数量, 循环生成

语法：<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>

 <template>
   <div>
     <h2>v-for</h2>
     <!-- 数组：这里的item是元素，index是下标 -->
     <ul v-for="(item, index) in arr" :key="index">
       <li>{{ item }}</li>
     </ul>
 
     <!--对象：vaule是属性值     objname是属性名  -->
     <ul v-for="(vaule, objname) in obj" :key="objname">
       <li>{{ objname }}={{ vaule }}</li>
     </ul>
 
     <!-- 数字 -->
     <p v-for="item in 100" :key="item">{{ item }}</p>
   </div>
 </template>
  <!-- 循环渲染的元素tr -->
       <tr v-for="(item, index) in list" :key="index">
         <td>{{ item.id }}</td>
         <td>{{ item.name }}</td>
         <td>{{ item.time }}</td>
         <td>
           <button @click="delbtn($event)" :delid="index">删除</button>
         </td>
       </tr>
 
 
 <script>
         export default {
         data() {
           return {
             list: [
               { id: 1, name: "奔驰", time: "2020-08-01" },
               { id: 2, name: "宝马", time: "2020-08-02" },
               { id: 3, name: "奥迪", time: "2020-08-03" },
             ],
             //   bool: false,
           };
         },
       }
 </script>

3、v-text和v-html

目的: 更新DOM对象的innerText/innerHTML

语法：v-text="vue数据变量",v-html="vue数据变量"

 <template>
   <div>
     <p v-text="str"></p>
     <p v-html="str"></p>
   </div>
 </template>
 
 <script>
   export default {
     data() {
       return {
         str: "<span>我是一个span标签</span>"
       }
     }
   }
 </script>

小结: v-text把值当成普通字符串显示, v-text ===> innerText

v-html把值当做html解析,v-html ===> innerHTML

4、v-show和v-if

作用：控制标签的可见与不可见

语法：<标签 v-show="vue变量" /> <标签 v-if="vue变量" />

(如果vue变量的值为true，就可见，否则就不可见)

原理: ①v-show 用的display:none隐藏 (频繁切换使用)

②v-if 直接从DOM树上添加或移除

<template>
   <div>
     <h1 v-show="isOk">v-show的盒子</h1>
     <h1 v-if="isOk">v-if的盒子</h1>
 
     <div>
       <p v-show="age > 18">我成年了</p>
       <p v-if="age > 18">我成年了</p>
     </div>
   </div>
 </template>
 
 <script>
 export default {
   data() {
     return {
       isOk: true,
       age: 15,
     }
   }
 }
 </script>

小结：

v-show 性能较好，对应需要频繁切换显示与隐藏的功能，可以使用v-show。

注意无论变量是否为true还是false,它一定会创建元素的。

v-if 会动态创建和删除元素。

在频繁的切换可见与不可见时，它的效率会低一点

如果变量的值为false,它将不会创建元素

*特殊的适用v-if的场景：如果是登陆用户就显示头像 <img src="xxx" v-if="isLogin">

5、v-if,v-else-if,else

作用：模板中的选择结构

格式：与js中的if选择结构是一致的。

语法：

<标签 v-if="条件"> </标签> <标签 v-else-if="条件"> </标签> <标签 v-else-if="条件"> </标签> <标签 v-else> </标签>

实例：

<template>
      <h2>学习v-if-elseif-else</h2>
      <p v-if="num >= 80">优秀</p> 
      <p v-else-if="num >= 60">一般</p> 
      <p v-else>不及格</p>
    </template>
 
    <script>
       export default {
         data () {
           return {
             num: 59 // 分数
           }
         }
       }
    </script>

6、v-on和methods

作用：给标签绑定事件

语法：<标签 v-on:事件名="要执行的少量代码" >

<标签 v-on:事件名="methods中的函数" >

<标签 v-on:事件名="methods中的函数(实参)">

注意：①v-on可以简写成 @。即 @事件名="methods中的函数"

②事件名可以是任意合法的dom事件

<!-- vue指令:   v-on事件绑定-->
 <button v-on:click="msg=1">简单代码直接写</button>
 <button v-on:click="add2">增加2个,调用函数</button>
 <button v-on:click="addN(5)">一次加5件，调用函数传递参数</button>
 <button @mouseenter="mouseFn">鼠标进入事件</button>
 
 <script>
     export default {
         data(){
           return {
             msg: 'v-on'
           }
         },
         methods: {
             add2(){
                 console.log('add2')
             },
             addN(num){
                 console.log(num)
             },
             mouseFn(){
                 console.log('mouseFn')
             }
         }
     }
 </script>

vue配置项-methods

作用:它是一个对象，在这个对象中定义函数

格式：

export default { methods: { 函数1: function(){ }, 函数2(){ } }

使用场景：

与v-on配合使用

在methods内部访问数据。this.xxx

在methods内部调用其他的methods

7、v-on事件对象

语法：①无传参, 通过形参直接接收

②传参, 通过$event指代事件对象传给事件处理函数

 <template>
   <div>
     <a @click="one" href="http://www.baidu.com">阻止百度</a>
     <hr>
     <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
   </div>
 </template>
 
 <script>
 export default {
   methods: {
     one(e){
       e.preventDefault()
     },
     two(num, e){
       e.preventDefault()
     }
   }
 }
 </script>

8、v-on事件修饰符

语法：

<标签 @事件名.修饰符="methods里函数" />

.stop - 阻止事件冒泡

.prevent - 阻止默认行为

.once - 程序运行期间, 只触发一次事件处理函数

<template>
   <div @click="fatherFn">
     <!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 -->
     <button @click.stop="btn">.stop阻止事件冒泡</button>
     <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
     <button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button>
   </div>
 </template>
 
 <script>
 export default {
   methods: {
     fatherFn(){
       console.log("father被触发");
     },
     btn(){
       console.log(1);
     }
   }
 }
 </script>

9、v-on按键修饰符

语法：①@keyup.enter - 监测回车按键

②@keyup.esc - 监测返回按键

更多修饰符

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
 methods: {
   enterFn(){
     console.log("enter回车按键了");
   },
   escFn(){
     console.log("esc按键了");
   }
 }
}
</script>

10、v-model双向绑定

目的：把value属性和vue数据变量, 双向绑定到一起

语法: v-model="data数据变量"

双向数据绑定：

数据变化 -> 视图自动同步

视图变化 -> 数据自动同

<template>
  <div>
    <!-- 
    	v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
    -->
    <!-- 绑定输入 -->
    <div>
      <span>用户名:</span>
      <input type="text" v-model="username" />
    </div>
    <div>
      <span>密码:</span>
      <input type="password" v-model="pass" />
    </div>
    
    <!-- 绑定选择 -->
    <div>
      <span>来自于哪里?</span>
      <select v-model="from">
        <option value="西安">陕西-西安</option>
        <option value="燕京">北京-燕京</option>
        <option value="大连">辽宁-大连</option>
      </select>
    </div>
    
    <div>
      <!-- checkbox特殊, 内部判断v-model是数组, 绑定value值 -->  
      <span>爱好</span>
      <input type="checkbox" v-model="hobby" value="吃饭" /><span>吃饭</span>
      <input type="checkbox" v-model="hobby" value="逛街" /><span>逛街</span>
      <input type="checkbox" v-model="hobby" value="旅游" /><span>旅游</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      pass: "",
      from: "",
      hobby: [], 
    }
  }
};
  </script>

总结: v-model适用于表单开发，自动获取用户输入或选择数据

2.3 MVVM设计模式

数据驱动视图演示:

MVVM详解:

模式说明：MVVM = Model + View + ViewModel

①MVVM，一种软件架构模式，决定了写代码的思想和层次

● M： model数据模型 (data里定义) ● V： view视图（template里定义html页面结构） ● VM： ViewModel视图模型 (vue组件实例this)

②MVVM通过数据双向绑定让数据自动地双向同步不再需要操作DOM

● V（修改视图） -> M（数据自动同步） ● M（修改数据） -> V（视图自动同步）

2.4 动态样式

1、动态class

格式1：<标签 :class="变量" />

格式2：<标签 :class="['类名1', '类名2']" />

格式3：<标签 :class="{类名1: 布尔值, 类名2: 布尔值}" />(如果布尔值为ture，就添加对应的类名)

<template>
  <div>
     <!-- 1、 格式1：<标签 :class="变量" />-->
       <div :class="box">samsung</div>

     <!-- 2、 格式2：<标签 :class="['类名1', '类名2']" />-->
        <div :class="['arrone', 'arrtwo']">samsung</div>
          <br />

     <!-- 3、格式3: <标签 :class="{类名1: 布尔值, 类名2: 布尔值}" /> -->
         <div :class="{ one: true, two: true, three: false }">apple</div>
    </div>
</template>

<script>
       export default {
          data() {
            return {
                 // 格式1
                box: "fontblue",
             };
          },
      };
</script>


<style >
/* 格式1 */
.fontred {
  color: red;
}
.fontblue {
  color: blue;
}

/* 格式2 */
.arrone {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
.arrtwo {
  color: white;
  background-color: rgb(23, 120, 84);
  text-align: center;
  border-radius: 10px;
}

/* 格式3  */
.one {
  color: white;
  background-color: rgb(23, 120, 84);
  text-align: center;
  border-radius: 10px;
}
.two {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
.three {
  font-size: 100px;
}
</style>

2、style样式

用法：

<标签 :style="{css属性名: 值}" />

可以和静态style共存

样式中带-属性写成小驼峰

<template> 
	<div class="box"    :style="{color:red}">      //写法一
   //或者
    <div class="box"  :style="obj">                //写法二
</template>      
<script>
     export default {
         data() {
            return {
              obj :{  color:red },
          };
     },
 };
</script>

2.5 计算属性

如果一个结果需要依赖data中的数据，但是需要经过一些逻辑处理，才能得到你想要的数据。此时就可以使用计算属性。

定义格式：

computed: {

形式一：

            计算属性名1 () { // 对依赖的数据进行处理，且进行return return }，

形式二：

           计算属性名2 : {

set(var){

当计算属性改变后开始执行此项

（这里var是改过的新值，改过的新值通过var传递进来）

         }，

get{

                 处理数据

                   return 值

          }

}

}

computed 是vue的配置选项，它的值是一个对象，其中可定义多个计算属性，每个计算属性就是一个函数。

使用格式：

在两个地方使用：

1、模板：①用插值表达式 {{计算属性名}}

②用其它指令

2、在实例内：this.计算属性名

<template>
  <div>
    <!-- 计算属性使用不用加（） -->
    <p>{{ abc }}</p>
    <p>{{ sum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4, 5],
    };
  },
  computed: {
    abc: function () {
      return "这是abc";
    },
    // 此为结构后的
    sum() {
      // 方式一求和
      //   let a = 0;
      //   this.arr.forEach((item) => {
      //     a += item;
      //   });
      //   return a;
      // 方式二求和
      return this.arr.reduce((sum, value) => {
        return (sum += value);
      }, 0);
    },
  },
};
</script>

和函数的区别：computed有缓存

kingarst

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue，一个强大的前端框架(基础知识和用法)

是什么：vue官网。vue是一个渐进式的javascript框架渐进式: 逐渐按需添加, 想用什么就用什么, 不必全都使用vue的特点：①渐进式 ②数据驱动视图 (响应式) ③组件系统1、创建项目1.1 创建命令命令：vue create vuecli-demovue和create是命令, vuecli-demo是文件夹名1.2 目录结构创建vue项目后会会生成一个目录结构，下面为结构说明：1.3 运行流程（运行基础）2、正式学习..
复制链接

扫一扫