vue基础总结

陈闲之

已于 2022-06-09 22:17:20 修改

阅读量1.2k

点赞数

文章标签： vue.js 前端 javascript

于 2022-05-14 00:09:05 首次发布

本文链接：https://blog.csdn.net/weixin_50939386/article/details/124762407

版权

vue是什么

渐进式javacript框架, 一套拥有自己规则的语法

vue脚手架

作用：帮助我们搭建项目

搭建项目及环境

安装
```
npm install - g @vue/cli
```
创建项目
- 注意：项目不能有大写，中文和特殊符号
```
vue create 项目名
```
切换到根目录，可以在命令行中cd,也可以自己在文件夹中cmd打开
```
cd 项目名
```
运行vue项目
```
npm run serve
```
详细安装过程：

项目结构

最为主要的几个

node_modules 第三方依赖包
public/index.html 浏览器运行的网页
src/App.vue 页面根组件
src/main.js 项目入口
package.json 记录项目的依赖包

项目的运行过程

从src/main.js 项目入口开始，然后在src/App.vue 页面根组件实例化vue对象，然后将public/index.html 浏览器运行的网页

项目的配置

vue.config.js
代码检查工具 ESLint
lintOnSave: false

项目单文件

好处是 js作用域独立
style配合scoped属性作用域独立，否则就是全局样式

vue指令

插值表达式

作用：把表达式的内容插入到插值所在的位置

语法： { {表达式}}

表达式：1. 变量 2. 属性 3. 三元运算符 4. 方法调用 5. 数字 6. 字符串

书写位置：变量声明在data 方法的返回对象里

    <template>
      <div>
        <h1>{
  { message }}</h1>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          message: "你好",
        };
      },
    };
    </script>

v-bind

作用：为标签绑定属性

语法： v-bind:属性名 = “Vue变量”

简写： :属性名 = “Vue变量”

书写位置： Vue变量声明在data方法的返回对象里

    <template>
      <div>
        <!-- v-bind:属性名 = “Vue变量” -->
        <!-- <a v-bind:href="url">点击去百度</a> -->
        <!--简写：  :属性名 = “Vue变量” -->
        <a :href="url">点击去百度</a>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          url: "http://www.baidu.com",
        };
      },
    };
    </script>

v-on

作用：绑定事件

语法： v-on:事件名 = “方法(参数)”

简写： @事件名 = ”方法(参数)“

注意：方法写在于data()方法同级的methods对象里面

    <template>
      <div>
        <!-- 显示数量 -->
        <p>{
  { count }}</p>
        <!-- 直接使用表达式点击加 1 -->
        <button v-on:click="count += 1">点击加1</button>
        <!-- 使用方法 简写 点击加5 -->
        <button @click="btnAdd">点击加5</button>
        <!-- 使用方法  简写  带参数  点击加10 -->
        <button @click="addBtn">点击加10</button>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          count: 0,
        };
      },
      methods: {
          //点击加5 
        btnAdd() {
          this.count += 5;
        },
        addBtn() {
          //点击加10
          this.count += 10;
        },
      },
    };
    </script>

v-on 修饰符

语法： @事件名.修饰符 = “方法”

修饰符：

（1）.stop 阻止冒泡

（2）.prevent 阻止默认行为

（3）.once 事件只触发一次

（4）.按键修饰符：

1 . .enter回车才触发事件

2 . .esc按ESC才会触发事件

	<template>
  <div>
    <!-- .stop 阻止冒泡事件 -->
    <div @click="parent">
      parent
      <div @click.stop="child">child</div>
    </div>
    <!-- .prevent 阻止默认行为 -->
    <p>
      <a href="http://www.baidi.com" @click.prevent="">点击</a>
    </p>
    <!-- .once 事件只触发一次 -->
    <p>
      <button @click.once="btn">点击我</button>
    </p>
    <p>
      <input type="text" @keydown.enter="ipt" />
    </p>
  </div>
</template>
<script>
export default {
  methods: {
    parent() {
      console.log("parent");
    },
    child() {
      console.log("child");
    },
    // hello() {},
    btn() {
      console.log("我被点击了");
    },
    ipt() {
      console.log("按下回车了");
    },
  },
};
</script>

v-model

作用： value 和 vue变量双向绑定

语法： v-model = “变量”

书写位置：变量记得声明在data方法的返回对象里

    <template>
      <div>
        用户名：<input type="text" v-model="username" /> 密码：
        <input type="password" v-model="password" />
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          username: "怎么",
          password: "",
        };
      },
    };
    </script>

v-model修饰符

语法：v-model.修饰符 = “变量”

修饰符：

1. .number 转换为数字赋值给变量

2. .trim 去点字符串首尾的空白符

3. .lazy input 失去焦点才更新变量

    <template>
      <div>
        <!-- .number   转换为数字赋值给变量 -->
        <input type="text" v-model.number="num" />
        <!-- .trim   去点字符串首尾的空白符 -->
        <input type="text" v-model.trim="str" />
        <!-- .lazy   input 失去焦点才更新变量 -->
        <input type="text" v-model.lazy="content" />
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          num: "",
          str: "",
          content: "",
        };
      },
    };
    </script>

v-model在表单中的使用

下拉选择

v-model写在select上面
绑定选中的option的value值

2. checkbox 
 -  v-model初始值为数组     绑定选中的checkbox的value
 - v-model初始值为非数组   绑定选中的checkbox的checkbox属性，为布尔值

rdio
- v-model绑定的是选中项的value值
textarea
- v-vmodel绑定用户输入的value值

	<template>
  <div>
    <p>
      <!--  - v-model写在select上面
      - 绑定选中的option的value -->
      来自于：
      <select v-model="num">
        <option value="广东">广东</option>
        <option value="湖北">湖北</option>
        <option value="四川">四川</option>
      </select>
    </p>

    爱好:
    <p>
      <!-- 数组    绑定的是选中项的value -->
      <input type="checkbox" value="运动" v-model="hobby" />运动
      <input type="checkbox" value="游戏" v-model="hobby" />游戏
      <input type="checkbox" value="学习" v-model="hobby" />学习
    </p>
    <p>
      <!-- v-model绑定的是选中的value -->
      <input type="radio" value="男" v-model="gender" />男
      <input type="radio" value="女" v-model="gender" />女
    </p>
    <!-- 绑定用户输入的value -->
    <p>自我介绍：<textarea v-model="content"></textarea></p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: "",
      hobby: [],
      gender: "",
      content: "",
    };
  },
};
</script>

v-for

作用：遍历列表

语法：

1. v-for = “变量 in 数据列表”

2. v-for = “(变量 ,索引) in 列表”

可循环的：数组对象字符串数字（从开始到结束）

<template>
  <div>
    <!-- v-for 数组的使用 -->
    <ul>
      <!-- 1.v-for = “变量 in 数据列表” -->
      <li v-for="item in list">{
  { item }}</li>
    </ul>

    <ul>
      <!-- 2. v-for = “(变量 ,索引) in 列表” -->
      <li v-for="(item, index) in list">{
  { index + 1 }}:{
  { item }}</li>
    </ul>

    <!-- 对象的使用 -->
    <!-- 1.v-for = “变量 in 数据列表” -->

    <ul>
      <li v-for="item in obj">{
  { item }}</li>
    </ul>
    <!-- 2. v-for = “(变量 ,索引) in 列表” -->
    <ul>
      <!-- 第二个参数是对象的key -->
      <li v-for="(item, key) in obj">{
  { key }}:{
  { item }}</li>
    </ul>

    <!-- 字符串遍历 -->
    <ul>
      <!-- 1.v-for = “变量 in 数据列表” -->
      <li v-for="item in str">{
  { item }}</li>
    </ul>

    <!-- 数字的遍历 -->
    <ul>
      <!-- 1.v-for = “变量 in 数据列表” -->
      <li v-for="item in num">{
  { item }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: ["赵云", "张飞", "刘备", "诸葛亮"],
      obj: {
        name: "赵云",
        age: 18,
      },
      str: "hello",
      num: 5,
    };
  },
};
</script>

v-text和v-html

v-text

作用：把内容作为文本直接显示，不解析内容

语法：v-text = “vue变量”

书写位置：变量声明在data方法返回对象

v-html

作用：v-html会解析内容中的html标签设置标签内容为HTML

语法：v-text = “vue变量”

书写位置：变量声明在data方法返回对象

    <template>
      <div>
        <p v-text="tex"></p>
        <p v-html="html"></p>
        <p v-html="tex"></p>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          tex: "hello",
          html: "<button>点击</button>",
        };
      },
    };
    </script>

v-show和v-if

v-show

作用：控制标签的显示和隐藏

语法：v-show=“表达式” 根据表达式的true和false来控制

原理：通过控制diaplay:none属性来控制显示隐藏

v-if

作用：控制标签的显示和隐藏

语法：v-if = “表达式” 根据表达式的true和false来控制

原理：通过控制是否插入标签来显示隐藏 false直接移除标签

    <template>
    <div>
        <h1 v-show="age >= 18">大于18</h1>
        <h1 v-show="age < 18">小于18</h1>
        <h2 v-if="age >= 18">大于18</h2>
        <h2 v-if="age < 18">小于18</h2>
        </div>
    </template>
    <script>
        export default {
            data() {
                return {
                    age: 99,
                };
            },
        };
    </script>

v-else和v-else-if

v-else

1. 必须搭配v-if使用

2. 必须是相邻的节点，中间不能有任何的标签

v-else-if

1. v-if可以和多个v-else-if搭配使用，需要多个条件控制

2. 多个条件控制可以使用v-else结尾

3. v-else是可选的

        <template>
      <div>
        <!-- if和else相邻 -->
        <!-- 必须是相邻的节点 -->
        <h3 v-if="age >= 18">大于等于18</h3>
        <h3 v-else="age < 18">小于18</h3>

        <!-- 1. v-if可以和多个v-else-if搭配使用，需要多个条件控制
             2. 多个条件控制可以使用v-else结尾       
             3.  v-else是可选的  -->
        <h2 v-if="age < 18">小于18</h2>
        <h2 v-else-if="age < 60">大于等于18且小于60</h2>
        <h2 v-else-if="age < 100">大于等于60小于100</h2>
        <!-- <h2 v-else=>未知</h2> -->
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          age: 55,
        };
      },
    };
    </script>

v-for更新检测和key

v-for更新

第一种情况，数组方法会修改原始数组的，会触发页面刷新
第二种情况，数组方法不修改原始数组，不会触发页面刷新
第三种情况，直接通过索引修改数组，不会触发数组更新
我们可以使用$set方法来手动触发更新

<template>
  <div>
    <!-- 第一种情况，数组方法会修改原始数组的，会触发页面刷新
    第二种情况，数组方法不修改原始数组，不会触发页面刷新
    第三种情况，直接通过索引修改数组，不会触发数组更新
    我们可以使用$set方法来手动触发更新 -->
    
    <ul>
      <li v-for="item in list">{
  { item }}</li>
    </ul>
    <button @click="list.reverse()">数组翻转</button>
    <button @click="list.slice(0, 3)">数组截取</button>
    <button @click="func">通过索引更新数组元素</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: ["a", "b", "c", "d"],
    };
  },
  methods: {
    func() {
      // this.$set(数组, 索引, 要更新的值);
      this.$set(this.list, 0, "A");
    },
  },
};
</script>

v-for 就地更新

在上一次的列表上逐条更新

id作为key

无key就地更新
有key，按照key比较
key是唯一不重复的字符串和数值
有id用id,无id用索引
使用key可以提高性能

动态设置class和style

class

语法：

原理：布尔值为true的时候增加类名，为false的时候删除类名

注意：类名有横线，加引号

 <template>
      <div>
        <!-- 动态设置class -->
        <!-- :class = “{类名：布尔值}” -->
        <!-- 布尔值为true的时候增加类名，为false的时候删除类名 -->
        <button :class="{ on: isOn, off: !isOn }" @click="fn">点击</button>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          isOn: false,
        };
      },
      methods: {
        fn() {
          this.isOn = !this.isOn;
        },
      },
    };
    </script>

    <style scoped>
    .on {
      background-color: aqua;
    }
    .off {
      background-color: blueviolet;
    }
    </style>

style

语法： style=“样式属性名：合法的样式值”

注意：样式名有横线，加引号或着小驼峰

       <template>
      <div>
        <button
          :style="{ color: fontColor, fontSize: '18px' }"
          @click="fontColor = 'blue'"
        >
          点击
        </button>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          fontColor: "red",
        };
      },
    };
    </script>

v-pre

跳过其所在节点的编译过程
可以用它跳过:没有使用指令语法,没有使用插值语法,会加快编译

  <h2>这是我要跳过编译的</h2>

过滤器

作用：转化格式过滤器就是一个函数，传入值返回处理的值
使用场景：过滤器只能用在插值表达式和v-bind动态属性里

语法：

全局过滤器

声明在main.js
Vue.filter(“过滤器名”,（值）=> {return “处理后的值”})

//main.js文件下
Vue.filter("reverseFun", (value) => {
     
  return 6666
})

//App.vue文件下
<template>
  <div>
    <h3>{
     {
      str | reverseFun }}</h3>
  </div>
</template>
<script>
export default {
     
  data() {
     
    return {
     
      str: "hello",
    };
  },
};
</script>

vue单文件过滤器

filters(过滤器名:(值) => {return “处理后的值”})
- 在Vue文件data同级的filters属性里
- 表达式的值是过滤器的第一个参数

<template>
  <!-- 过滤器转换数据格式 -->
  <!-- 使用过滤器  方法不使用括号-->
  <div>
    <div>商品的价格：{
    { price | priceFilter }}</div>
    <h2>{
    { "hello" | toUpperCase }}</h2>
  </div>
</template>
<script>
export default {
  data() {
    return {
      price: 9,
    };
  },
  filters: {
    priceFilter(num) {
      return `${num < 10 ? "0" + num : num}￥`;
    },
    toUpperCase(value) {
      return value.toUpperCase();
    },
  },
};
</script>

可同时使用多个过滤器，或者给过滤器传参

语法：

过滤器传参：vue变量|过滤器(实参)
多个过滤器：vue变量|过滤器1|过滤器2

计算属性

是什么：根据一些数据运算出来的属性

原理：当计算属性依赖的数据变化的时候，计算属性会重新运算

语法： { {变量}}

声明位置： data同级的computed对象内

<template>
  <div>
    <h1>{
  { a }} + {
  { b }} = {
  { sum }}</h1>
    a <input type="text" v-model.number="a" /> b
    <input type="text" v-model.number="b" />
  </div>
</template>
<script>
export

最低0.47元/天解锁文章

陈闲之

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue基础总结

vue是什么渐进式javacript框架, 一套拥有自己规则的语法vue脚手架作用：帮助我们搭建项目搭建项目及环境安装npm install - g @vue/cli创建项目注意：项目不能有大写，中文和特殊符号vue create 项目名切换到根目录，可以在命令行中cd,也可以自己在文件夹中cmd打开cd 项目名运行vue项目npm run serve项目结构最为主要的几个node_modules
复制链接

扫一扫