Vue快速开发

2022/4/10 23:45:37

编程Tag： vue 开发 data console name 快速 log Num

本文主要是介绍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

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

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

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

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

(4)安装yarn

npm install -g yarn

(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

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

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

(2)全局安装vue脚手架

npm install -g @vue/cli-init

(3)初始化Vue项目

vue init webpack 项目名称

(4)启动vue项目

npm run start

10.整合Element-UI

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

(1)安装 element-ui

 npm i element-ui

(2)引入Element-UI

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

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

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

(5)路由配置

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

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

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

Vue快速开发

Vue快速开发

1.安装VSCode

2.vue-devtools插件安装

3.Vue基本语法

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

4.2.3 v-bind

4.2.4 v-model

4.2.5 v-on

4.2.6 v-for

4.2.7 v-if和v-show

4.2.8 v-else和v-else-if

4.计算属性computed

5.监听watch

6.过滤器filter

7.组件化

8.生命周期钩子函数

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

10.整合Element-UI

相关编程文章