前端vue框架的基本使用

最新推荐文章于 2024-06-01 09:24:06 发布

duke-coder

最新推荐文章于 2024-06-01 09:24:06 发布

阅读量634

点赞数

本文链接：https://blog.csdn.net/weixin_42763269/article/details/109787537

版权

1.vscode基本使用

vscode插件安装:插件安装在extension中。
常用的几个小插件

jshint：js代码规范检查
Beautify：一键美化代码
Vetur：.vue文件识别
Javascript(ES6) code snippets：ES6语法提示
Auto Rename Tag：自动重命名标签。标签都是成对出现的，开始标签修改，结束标签也会跟着修改。
Auto Close Tag：自动闭合标签。针对一些非标准的标签。
vue helper：一些vue代码的快捷代码
vscode-icons：可选。提供了很多类型的文件夹icon，不同类型的文件夹使用不同的icon，使得文件查找更直观
open in browser：可选。右键选择在默认浏览器中打开当前网页

vscode快捷键中英对照

vue插件总结原文地址：https://tangjiusheng.com/vue/155.html

2.vue使用

Vue是一套用于构建前后端分离的框架。由国内尤雨溪开发出来，目前是全球流行的前端框架。
Vue安装

通过script标签引用。

# 开发环境
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
# 或者是指定版本号
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
# 或者是下载代码保存到本地
<script src="lib/vue.js"></script>


# 生产环境，使用压缩后的文件
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>

通过npm(node package manager)安装
通过命令vue-cli安装

基本使用
使用vue，首先创建vue对象，在该对象中传递el(element)参数，用来找到一个vue渲染的根元素。并且可以传递一个data参数，其中所有值都可以直接在根元素下使用{{}}来引用。

<div id="app">
    <p>{{username}}</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            "username": "duke"
        }
    });
</script>

注意:data中的数据只能在vue的根元素下使用，在其他地方无法被vue识别和渲染

<div id="app">
</div>
<!-- 这里渲染不了 -->
<p>{{username}}</p>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            "username": "duke"
        }
    });
</script>

在vue对象中可以添加methods，这个属性中专门用来存储自己的函数。methods中的函数可以在模板中使用，并且在methods中的函数来访问data中的的值，只需要通过this.属性名就可以访问到。无需添加this.data.属性名来访问

<div id="app">
    <p>{{greet()}}</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            "username": "duke"
        },
        methods: {
            greet: function(){
                return "everyone！" + this.username
            }
        }
    });
</script>

3.vue的模板语法

3.1文本

在html中通过**{{}}**(双大括号)中可以把Vue对象中的数据插入到网页中。并且只要Vue对象上对应的值发生改变，那么html中双大括号中的值也会立刻改变

<div id="app">
    <p>{{username}}</p>
    <button v-on:click="change">点击修改</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            "username": "duke"
        },
        methods: {
            change: function(){
                this.username = '杜克';
            }
        }
    });
</script>

若在html中的{{}}中，第一次渲染完成以后，不想数据随之改变。可以使用v-once指令实现。

<p v-once>{{username}}</p>

显示原生的HTML
在vue对象中，如有一段原生的html代码需要渲染出来，如果直接通过{{}}进行渲染，双大括号将会将html代码当作字符串。可以通过v-html指令来实现

<div id="app">
    <div v-html="code"></div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            "code": "<a href='https://www.baidu.com/'>百度一下，你就知道！</a>"
        }
    });
</script>

属性绑定
通过v-bind在html元素的属性上绑定Vue对象中的变量。

<div id="app">
    <img class="{{classname}}">hello,world</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            "classname": "pclass"
        },
    });
</script>

上面无法生效，只有使用v-bind才能生效

<div id="app">
    <img v-bind:src="imgSrc" alt="">
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            "imgSrc": "https://i.ytimg.com/vi/5HKZ6bU6Zg0/maxresdefault.jpg"
        }
    });
</script>

3.2属性绑定Class和Style

绑定Class

数组实现

<div id="app">
    <p v-bind:class="[classname1,classname2]">hello,world</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            classname1: "pcolor",
            classname2: "pfont"
        }
    });
</script>

2.对象实现

<div id="app">
    <p v-bind:class="{pcolor:isColor,pfont:isFont}">hello，world</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isColor: true,
            isFont: true
        }
    });
</script>

绑定Style

数组实现

<li :style="[liStyle1,liStyle2]">首页</li>
<script>
    new Vue({
        el: "#app",
        data: {
            liStyle: {
            backgroundColor: "red",
            fontSize: "14px"
        },
        liStyle2: {
            fontWeight: 800
        }
        }
    })
</script>

对象实现

# 读取对应样式的值
<li :style="{backgroundColor:pBgColor,fontSize:pFontSize}">首页</li>
# 或者是直接读取整个字符串
<li :style="liStyle">首页</li>

样式中如有横线，则需要变成驼峰命名的方式。

使用javaScript表达式
在使用了 V-bind的html属性，或者使用了{{}}的文本。可以执行一个Javascript表达式。不能是语句。

<div id="app">
  <p v-bind:style="{color:color?'red':'blue'}">{{username.split(" ").reverse().join(" ")}}</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            username: "duke",
            color: false
        }
    });
</script>

条件判断
v-if、v-else-if、v-else组合实现

<div id="app">
    <p v-if="weather == 'sun'">今天去公园玩！</p>
    <p v-else-if="weather == 'rain'">今天去看电影！</p>
    <p v-else>今天哪儿也不去！</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            weather: 'sun'
        }
    });
</script>

如果想要在一个条件中加载多个元素，可以使用tempplate实现

<div id="app">
    <template v-if="age<18">
        <p>l1</p>
        <p>l2</p>
    </template>
    <template v-else-if="age>=18 && age<25">
        <p>l3</p>
        <p>l4</p>
    </template>
    <template v-else>
        <p>l5</p>
        <p>l6</p>
    </template>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            age: 24
        }
    });
</script>

注意：在模板中，Vue会尽量重用已有的元素，而不是重新渲染，这样可以变得更加高效。

<div id="app">
    <template v-if="loginType=='username'">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="用户名">
    </template>
    <template v-else-if="loginType=='email'">
        <label for="email">邮箱：</label>
        <input type="text" id="email" name="email" placeholder="邮箱">
    </template>
    <div>
        <button v-on:click="changeLoginType">切换登录类型</button>
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            loginType: "username"
        },
        methods: {
            changeLoginType: function(event){
                this.loginType = this.loginType=="username"?"email":"username";
            }
        }
    });
</script>

如果想让元素每次切换的时候都重新渲染一遍，可以在需要渲染的元素上加上唯一的元素。Key属性推荐使用整形，字符串类型。

<div id="app">
    <template v-if="loginType=='username'">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="用户名" key="username">
    </template>
    <template v-else-if="loginType=='email'">
        <label for="email">邮箱：</label>
        <input type="text" id="email" name="email" placeholder="邮箱" key="email">
    </template>
    <div>
        <button v-on:click="changeLoginType">切换登录类型</button>
    </div>
</div>

v-Show\v-if

v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。一般来说， v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

3.3循环

在模板中使用v-for指令来循环数组，对象
循环数组

<div id="app">
    <table>
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>作者</th>
            </tr>
            <tr v-for="(book,index) in books">
                <td>{{index}}</td>
                <td>{{book.title}}</td>
                <td>{{book.author}}</td>
            </tr>
    </table>
</div>

循环对象
可以在循环的时候接收多个参数

<div id="app">
    <div v-for="(value,key) in person">
        {{key}}:{{value}}
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            person: {
                "username": "duke",
                "age": 18,
                "homepage": "https://www.baidu.com/"
            }
        }
    });
</script>

保持状态
如果没有使用key元素进行唯一标识，循环出来的元素，在后期数据发生更改的时候是会默认重用的。而且元素的顺序不会跟着数据的顺序更改而更改

<div id="app">
    <div v-for="(book,index) in books">
        <label for="book">{{book}}</label>
        <input type="text" v-bind:placeholder="book">
    </div>
    <button v-on:click="changeBooks">更换图书</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            books: ['三国演义','水浒传','红楼梦','西游记']
        },
        methods: {
            changeBooks: function(event){
                this.books.sort((x,y) => {
                    return 5 - parseInt(Math.random()*10)
                });
            }
        }
    });
</script>

触发视图更新
vue对一些方法进行了包装和变异，以后数组通过这些方法进行数组更新，会触发视图的更新

push()：添加元素

this.books.push("duke")

pop()：删除数组最后一个元素。

this.books.pop()

shift()：删除数组的第一个元素

this.books.shift()

unshift(item)：在数组的开头位置添加一个元素。

this.books.unshift("duke")

splice(index,howmany,item1,…,itemX)：向数组中添加或者删除或者替换元素。

 // 向books第0个位置添加元素
 this.books.splice(0,0,"四大名著")
 // 下标从0开始，删除2个元素
 this.books.splice(0,2)
 // 下标从0开始，替换2个元素
 this.books.splice(0,2,'百年孤独','骆驼祥子')

sort(function)：排序。

 this.books.sort(function(x,y){
     // 取两个随机数排序
     a = Math.random();
     b = Math.random();
     return a-b;
 });

reverse()：将数组元素进行反转。

this.books.reverse();

视图更新注意事项

直接修改数组中的值不会触发视图更新。

this.books[0]='Python';

想要触发视图更新，应当使用splice或者用Vue.set方法实现:

Vue.set(this.books,0,'Python');

动态的给对象添加属性也不会触发视图更新，只能使用Vue.set来添加。

 <div id="app">
     <ul>
         <li v-for="(value,name) in person">{{name}}:{{value}}</li>
     </ul>
     <script>
         let vm = new Vue({
             el: "#app",
             data: {
                 person: {"username": 'duke'}
             },
             methods: {
                 changePerson: function(event){
                     Vue.set(this.person,'age',18)
                 }
             }
         });
     </script>
 </div>

绑定事件
v-on后面添加事件或者函数

<div id="app">
    <p>{{count}}</p>
    <button v-on:click="count+=1">加</button>
    <button v-on:click="subtract(10)">减10</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            count: 0
        },
        methods: {
            subtract: function(value){
                this.count -= value;
            }
        }
    });
</script>

传入event参数
通过传递$event参数可以获取原生的DOM事件。

<button v-on:click="subtract(10,$event)">减10</button>
...
<script>
...
methods: {
    subtract: function(value,event){
        this.count -= value;
        console.log(event);
    }
}
...
</script>

duke-coder

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端vue框架的基本使用

1.vscode基本使用vscode插件安装:插件安装在extension中。常用的几个小插件jshint：js代码规范检查Beautify：一键美化代码Vetur：.vue文件识别Javascript(ES6) code snippets：ES6语法提示Auto Rename Tag：自动重命名标签。标签都是成对出现的，开始标签修改，结束标签也会跟着修改。Auto Close Tag：自动闭合标签。针对一些非标准的标签。vue helper：一些vue代码的快捷代码vscode-
复制链接

扫一扫