Vue 基础知识

原创已于 2022-02-08 15:49:08 修改 · 361 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2021-12-11 09:51:59 首次发布

简介

vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom

vue模板

 <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">{{ name }}</div>
    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          name: "tom"
        }
      });
    </script>

备注：

el：是挂载的DOM元素
data：是提供的数据模型
{{}}：是vue提供的模板语法，里面可以嵌套变量或者进行简单的运算
vue.js：是vue的外包

vue指令

v-text和v-html

v-text：是获取data里的所有数据（包括标签）

<div id="app">
      <div v-text="name"></div>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          name: "<span>姓名</span>"
        }
      });
    </script>

// 结果
<span>姓名</span>

v-html：是获取data里的数据（如果有标签，会把标签略掉）

<div id="app">
      <div v-html="name"></div>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          name: "<span>姓名</span>"
        }
      });

// 结果
姓名

v-model

特点：双向数据绑定： data中的数据--->渲染到页面；页面中输入框的内容变化---->data中的数据变化。

事件处理

<div id="app">
      <button v-on:click="getRes">按钮</button>
      <button @click="getRes">按钮</button>
      <button @click="getRes(event)">按钮</button>
      <h3>{{ num }}</h3>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          num: 10
        },
        methods: {
          getRes: function() {
            this.num++;
            console.log(this == vue); //这里的this指的是vue的实例对象
            console.log(event);
          }
        }
      });
    </script>

事件修饰符

<a href="https://www.baiud.com" @click.stop="fn"></a>
<a href="https://www.baiud.com" @click.prevent="fn"></a>
备注：a标签默认有默认跳转行为，添加了prevent修饰符，点击就不会页面跳转了。

属性绑定

语法： v-bind:属性名=值或者:属性名=值

 <div id="app">
      <a :href="url">跳转</a>
      <button @click="fn">更改跳转地址</button>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          url: ""
        },
        methods: {
          fn: function() {
            this.url = "https://www.baidu.com";
          }
        }
      });
    </script>

样式绑定

<style>
      .red {
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div v-bind:class="{red:isShow}">我是测试div</div><!--样式-->
      <button @click="fn">更改跳转地址</button>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          isShow: false
        },
        methods: {
          fn: function() {
            this.isShow = !this.isShow;// 绑定样式
          }
        }
      });
    </script>

类名数组形式

<style>
      .redName {
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .fzName {
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div :class="[red,fz]">我是测试div</div><!--类名数组-->
      <button @click="fn">更改跳转地址</button>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
// 绑定
          red: "redName",
          fz: "fzName"
        },
        methods: {
          fn: function() {
            this.red = "";
          }
        }
      });
    </script>

style类绑定

<div id="app">
      <div :style="{width:w,height:h,border:bd}">111</div>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
// 绑定
          w: "200px",
          h: "200px",
          bd: "1px solid #000"
        },
        methods: {
          fn: function() {
            this.w = "300px";
          }
        }
      });
    </script>

分支和循环结构

条件

语法： v-if v-else-if ... v-else

<div id="app">
      <p v-if="sal>=8000">吃大餐</p>
      <p v-else-if="sal>=5000&&sal<8000">在家吃</p>
      <p v-else="sal>=8000">没得吃</p>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          sal: 5000
        },
        methods: {
          fn: function() {
            this.w = "300px";
          }
        }
      });
    </script>

v-if和v-show

<div id="app">
      <button @click="fn">按钮</button>
      <div v-show="flag">我是div元素</div>
      <div v-if="flag">我是div元素</div>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          flag: false
        },
        methods: {
          fn: function() {
            this.flag = !this.flag;
          }
        }
      });
    </script>
注意v-if和v-show的区别：

v-if是是否渲染显示出来，v-show是已经渲染了，切换了display:none属性。
如果页面频繁切换的时候，考虑到性能问题，推荐使用 v-show

循环

代码结构：

<div id="app">
      <!-- 第一种写法 -->
      <ul>
        <li v-for="item in students">{{ item }}</li>
      </ul>
      <!-- 第二种写法 -->
      <ul>
        <li v-for="(item,index) in students">{{ item }}---{{ index }}</li>
      </ul>
    </div>

    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          students: ["tom", "jim", "jack"]
        }
      });
    </script>

vue基础语法

表单操作

表单绑定

 <div id="app">
      <form action="">
<!--设置绑定-->
        姓名 <input type="text" v-model="name" />
        性别
        <input type="radio" v-model="sex" value="男" />男
        <input type="radio" v-model="sex" value="女" />女 爱好
        <input type="checkbox" value="唱歌" v-model="hobby" />唱歌
        <input type="checkbox" value="跳舞" v-model="hobby" />跳舞
        <input type="checkbox" value="敲代码" v-model="hobby" />敲代码
        你的户籍地址
        <select v-model="city">
          <option value="保定">保定</option>
          <option value="北京">北京</option>
          <option value="上海">上海</option>
        </select>
        你的想法是？
        <textarea v-model="ideas" cols="30" rows="10"></textarea>
        <input type="button" @click="handle" />
      </form>
    </div>
<script>
      let vue = new Vue({
        el: "#app",
        data: {
          name: "",
          sex: "",
          hobby: [],
          city: [],
          ideas: ""
        },
        methods: {
          handle: function() {
// 绑定数据
            console.log(this.name);
            console.log(this.sex);
            console.log(this.hobby);
            console.log(this.city);
            console.log(this.ideas);
          }
        }
      });
    </script>

表单修饰符

<div id="app">
      <input type="text" v-model.trim="text" />
      <input type="text" v-model.lazy="text" />
      <div>{{ text }}</div>
      <button @click="handle">测试</button>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          text: ""
        },
        methods: {
          handle: function() {
            console.log(this.text.length);
          }
        }
      });
    </script>
备注：
.trim是去掉前后的空格
.lazy是失去焦点以后才会触发
.number是输入的是字符串，会自动转换成数字

计算属性

特点：

方法调用的时候需要用小括号，计算属性不需要
计算属性有缓存，调用多次，还是从缓存中读取，方法调用1次执行1次。

侦听器

用法：侦听器一般用于执行异步操作或者比较消耗性能的时候，主要是用于监听data中的数据变化。

过滤器

简介：vue中的过滤器一般用于日期格式化或者把字符串比如大写变小写等等格式处理

过滤器总结：vue中的过滤器有全局过滤器和局部过滤器两种，局部的只能在本组件中起作用，全局的在整个项目中起作用。

全局过滤器语法：

 Vue.filter("过滤器名字", function(val) {
   处理逻辑
 });

局部过滤器语法：

filters: {
   过滤器名称: function(val) {
           处理逻辑
    }
  }

Vue生命周期

挂载阶段：主要是初始化数据用的

beforeCreate
created
beforeMount
mounted

更新阶段：元素或者组件的变更

beforeUpdate
updated

销毁阶段:

beforeDestroy
destroyed

总结：

1、created函数及以后才能处理data中的数据
2、mounted函数及以后才能对DOM元素获取并处理。（vue不建议直接操作DOM元素）