Javascript

Vue快速开发

本文主要是介绍Vue快速开发,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

Vue快速开发

1.安装VSCode

地址:https://code.visualstudio.com/

安装以下组件:

  • Auto Close Tag
  • Auto Rename Tag
  • Chinese
  • ESlint
  • HTML CSS Support
  • HTML Snippets
  • JavaScript ES6
  • Live Server
  • open in brower
  • Vetur

2.vue-devtools插件安装

(1)下载地址:https://github.com/vuejs/devtools

image-20220213212012729

(2)下载后解压,cmd到解压目录,执行npm install

如果在E盘,cmd输入e:,让后cd到路径

或者直接在devtools-main解压目录输入cmd,回车

image-20220213215834234

image-20220213214856901

(3)执行npm run build,新版本使用npm run build报错

image-20220213215303683

(4)安装yarn

npm install -g yarn

image-20220213215427890

(5)使用前更换淘宝镜像

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
yarn config get registry (如果上面配置正确这个命令会输出淘宝镜像地址)

(6)配置插件

yarn install

image-20220213221802320

中间失败了一次,又执行了一次就成功了

image-20220213221854102

yarn run build

3.Vue基本语法

4.2.2 v-text、v-html、v-ref

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
        <p>前面的内容如果网速慢的话会先显示括号,然后才替换成数据。
            v-html 和v-text能解决这个问题</p>
        {{msg}}  {{1+1}}  {{hello()}} 

        <p>用v-html取内容</p>
        <p><span v-html="msg"></span></p>
        
        <p>用v-text取内容</p>
        <p><span v-text="msg"></span></p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>

      let vm = new Vue({
        el:"#app",
            data:{
                msg:"<h1>Hello</h1>",
                link:"http://www.baidu.com"
            },
            methods:{
                hello(){
                    return "World"
                }
            }
      });
    </script>
  </body>
</html>

4.2.3 v-bind

v-bind:,简写为:。表示把model绑定到view。可以设置src、title、class等

class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <a v-bind:href="link">跳转</a>
       <!-- class,style  {class名:vue值}-->
       <span v-bind:class="{active:isActive,'text-danger':hasError}"
       :style="{color: color1,fontSize: size}">你好</span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
      let vm = new Vue({
        el: "#app",
        data: {
          link: "http://www.baidu.com",
          isActive: true,
          hasError: true,
          color1: "red",
          size: "36px",
        },
        methods: {},
      });
    </script>
  </body>
</html>

4.2.4 v-model

v-model双向绑定,v-bind只能从model到view。v-model能从view到mode

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      精通的语言:
      <input type="checkbox" v-model="language" value="Java" /> Java<br />
      <input type="checkbox" v-model="language" value="PHP" /> PHP<br />
      <input type="checkbox" v-model="language" value="Python" /> Python<br />
      选中了 {{language.join(",")}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
      let vm = new Vue({
        el: "#app",
        data: {
            language:[]
        }     
      });
    </script>
  </body>
</html>

4.2.5 v-on

事件监听可以使用 v-on 指令

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。

Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

  • .stop - 阻止冒泡
  • .prevent - 阻止默认事件
  • .capture - 阻止捕获
  • .self - 只监听触发该元素的事件
  • .once - 只触发一次
  • .left - 左键事件
  • .right - 右键事件
  • .middle - 中间滚轮事件
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!--事件中直接写js片段-->
      <button v-on:click="num++">点赞</button>
      <!--事件指定一个回调函数,必须是Vue实例中定义的函数-->
      <button @click="cancel">取消</button>
      <!--  -->
      <h1>有{{num}}个赞</h1>

      <!-- 事件修饰符 -->
      <div style="border: 1px solid red; padding: 20px" v-on:click.once="hello">
        大div
        <div style="border: 1px solid blue; padding: 20px" @click.stop="hello">
          小div <br />
          <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
        </div>
      </div>

      <!-- 按键修饰符: -->
      <input
        type="text"
        v-model="num"
        v-on:keyup.up="num+=2"
        @keyup.down="num-=2"
        @click.ctrl="num=10"
      /><br />
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
      let vm = new Vue({
        el:"#app",
            data:{
                num: 1
            },
            methods:{
                cancel(){
                    this.num--;
                },
                hello(){
                    alert("点击了")
                }
            }
      });
    </script>
  </body>
</html>

4.2.6 v-for

可以遍历 数组[] 字典{} 。对于字典 v-for="(value, key, index) in object

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
        <ul>
            <!-- 4、遍历的时候都加上:key来区分不同数据,提高vue渲染效率 -->
            <li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'">
                <!-- 1、显示user信息:v-for="item in items" -->
               当前索引:{{index}} ==> {{user.name}}  ==>   
                  {{user.gender}} ==>{{user.age}} <br>
                <!-- 2、获取数组下标:v-for="(item,index) in items" -->
                <!-- 3、遍历对象:
                        v-for="value in object"
                        v-for="(value,key) in object"
                        v-for="(value,key,index) in object" 
                -->
                对象信息:
                <span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}};</span>
                <!-- 4、遍历的时候都加上:key来区分不同数据,提高vue渲染效率 -->
            </li>

            
        </ul>

        <ul>
            <li v-for="(num,index) in nums" :key="index"></li>
        </ul>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
      let app = new Vue({
            el: "#app",
            data: {
                users: [
                { name: '柳岩', gender: '女', age: 21 },
                { name: '张三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '刘亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }
                ],
                nums: [1,2,3,4,4]
            },
        })
   </script>
  </body>
</html>

4.2.7 v-if和v-show

v-if元素会被引出,v-show只是隐藏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
        v-if,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染。
        v-show,当得到结果为true时,所在的元素才会被显示。 
    -->
    <div id="app">
        <button v-on:click="show = !show">点我呀</button>
        <!-- 1、使用v-if显示 -->
        <h1 v-if="show">if=看到我....</h1>
        <!-- 2、使用v-show显示 -->
        <h1 v-show="show">show=看到我</h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                show: true
            }
        })
    </script>

  </body>
</html>

4.2.8 v-else和v-else-if

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
        v-if,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染。
        v-show,当得到结果为true时,所在的元素才会被显示。 
    -->
    <div id="app">
        <button v-on:click="show = !show">点我呀</button>
        <!-- 1、使用v-if显示 -->
        <h1 v-if="show">if=看到我....</h1>
        <!-- 2、使用v-show显示 -->
        <h1 v-show="show">show=看到我</h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                show: true
            }
        })
    </script>

  </body>
</html>

4.计算属性computed

什么是计算属性:属性不是具体值,而是通过一个函数计算出来的,随时变化

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>原始字符串: {{ message }}</p>
      <p>计算后反转字符串: {{ reversedMessage }}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          message: "Runoob!",
        },
        computed: {
          // 计算属性的 getter
          reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split("").reverse().join("");
          },
        },
      });
    </script>
  </body>
</html>

5.监听watch

监听属性 watch,我们可以通过 watch 来响应数据的变化。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p style="font-size: 25px">计数器: {{ counter }}</p>
      <button @click="counter++" style="font-size: 25px">点我</button>
      <br />

      <!-- 某些结果是基于之前数据实时计算出来的,我们可以利用计算属性。来完成 -->
      <ul>
        <li>
          西游记; 价格:{{xyjPrice}},数量:<input
            type="number"
            v-model="xyjNum"
          />
        </li>
        <li>
          水浒传; 价格:{{shzPrice}},数量:<input
            type="number"
            v-model="shzNum"
          />
        </li>
        <li>总价:{{totalPrice}}</li>
        {{msg}}
      </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          counter: 1,
          xyjPrice: 99.98,
          shzPrice: 98.0,
          xyjNum: 1,
          shzNum: 1,
          msg: "",
        },
        computed: {
          totalPrice() {
            return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum;
          },
        },
        watch: {
          xyjNum: function (newVal, oldVal) {
            if (newVal >= 3) {
              this.msg = "库存超出限制";
              this.xyjNum = 3;
            } else {
              this.msg = "";
            }
          },
        },
      });
      vm.$watch("counter", function (nval, oval) {
        // new old
        alert("计数器值的变化 :" + oval + " 变为 " + nval + "!");
      });
    </script>
  </body>
</html>

6.过滤器filter

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
       <!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 -->
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==>
                {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        
      // 全局过滤器
      Vue.filter("gFilter", function (val) {
            if (val == 1) {
                return "男~~~";
            } else {
                return "女~~~";
            }
        })

        let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            },
            filters: { // 局部过滤器,只可以在当前vue实例中使用
                genderFilter(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        })

    </script>
  </body>
</html>

7.组件化

  • 组件其实也是一个vue实例,因此它在定义时也会接收:data、methods、生命周期函数等
  • 不同的是组件不会与页面的元素绑定(所以不写el),否则就无法复用了,因此没有el属性。
  • 但是组件渲染需要html模板,所以增加了template属性,值就是HTML模板
  • data必须是一个函数,不再是一个对象。
  • 全局组件定义完毕,任何vue实例都可以直接在HTML中通过组件名称来使用组件了
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <button v-on:click="count++">我被点击了 {{count}} 次</button>

      每个对象都是独立统计的
      <counter></counter>
      <counter></counter>
      <counter></counter>
      <counter></counter>
      <counter></counter>

      <button-counter></button-counter>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
      //1、全局声明注册一个组件 // counter标签,代表button
      // 把页面中<counter>标签替换为指定的template,而template中的数据用data填充
      Vue.component("counter", {
        template: `<button v-on:click="count++">我被点击了 {{count}} 次</button>`,
        data() {
          // 如果 Vue 没有这条规则,点击一个按钮就可能会像如下代码一样影响到其它所有实例:
          return {
            count: 1, // 数据
          };
        },
      });

      //2、局部声明一个组件
      const buttonCounter = {
        template: `<button v-on:click="count++">我被点击了 {{count}} 次~~~</button>`,
        data() {
          return {
            count: 1,
          };
        },
      };

      let vm = new Vue({
        el: "#app",
        data: {
          count: 1,
        },
        methods: {},
      });
    </script>
  </body>
</html>

8.生命周期钩子函数

每个vue实例在被创建时都要经过一系列的初始化过程:创建实例,装载模板、渲染模板等等。vue为生命周期中的每个状态都设置了钩子函数(监听函)。每当vue实列处于不同的生命周期时,对应的函数就会被触发调用。

  • beforeCreate

  • created

  • beforeMount

  • mounted

  • beforeUpdate

  • updated

  • beforeDestroy

  • destroyed

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <span id="num">{{num}}</span>
        <button @click="num++">赞!</button>
        <h2>{{name}},有{{num}}个人点赞</h2>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                name: "张三",
                num: 100
            },
            methods: {
                show() {
                    return this.name;
                },
                add() {
                    this.num++;
                }
            },
            beforeCreate() {
                console.log("=========beforeCreate=============");
                console.log("数据模型未加载:" + this.name, this.num);
                console.log("方法未加载:" + this.show());
                console.log("html模板未加载:" + document.getElementById("num"));
            },
            created: function () {
                console.log("=========created=============");
                console.log("数据模型已加载:" + this.name, this.num);
                console.log("方法已加载:" + this.show());
                console.log("html模板已加载:" + document.getElementById("num"));
                console.log("html模板未渲染:" + document.getElementById("num").innerText);
            },
            beforeMount() {
                console.log("=========beforeMount=============");
                console.log("html模板未渲染:" + document.getElementById("num").innerText);
            },
            mounted() {
                console.log("=========mounted=============");
                console.log("html模板已渲染:" + document.getElementById("num").innerText);
            },
            beforeUpdate() {
                console.log("=========beforeUpdate=============");
                console.log("数据模型已更新:" + this.num);
                console.log("html模板未更新:" + document.getElementById("num").innerText);
            },
            updated() {
                console.log("=========updated=============");
                console.log("数据模型已更新:" + this.num);
                console.log("html模板已更新:" + document.getElementById("num").innerText);
            }
        });
    </script>
</body>

</html>

9.使用Vue脚手架快速开发

(1)全局安装webpack

npm install webpack -g

image-20220214003415738

(2)全局安装vue脚手架

npm install -g @vue/cli-init

image-20220214003538547

(3)初始化Vue项目

vue init webpack 项目名称

image-20220214003751232

(4)启动vue项目

npm run start

image-20220214004002384

10.整合Element-UI

官网:https://element.eleme.cn/#/zh-CN

(1)安装 element-ui

 npm i element-ui

image-20220214005153669

(2)引入Element-UI

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

image-20220214005423073

(3)把elementUi的container布局容器代码拷到App.vue中

image-20220214010329098

(4)修改App.vue中的 ,动态获取视图

image-20220214011921297

(5)路由配置

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/table',
      name: 'MyTable',
      component: MyTable
    }
  ]
})

image-20220214012106757

(6)el-menu设置router,并添加跳转路由

image-20220214012026031

这篇关于Vue快速开发的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!