前端vue框架的基本使用

1.vscode基本使用

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

vscode快捷键中英对照

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

2.vue使用

  • Vue是一套用于构建前后端分离的框架。由国内尤雨溪开发出来,目前是全球流行的前端框架。
  • Vue安装
  1. 通过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>
  1. 通过npm(node package manager)安装
  2. 通过命令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
  1. 数组实现
<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
  1. 数组实现
<li :style="[liStyle1,liStyle2]">首页</li>
<script>
    new Vue({
        el: "#app",
        data: {
            liStyle: {
            backgroundColor: "red",
            fontSize: "14px"
        },
        liStyle2: {
            fontWeight: 800
        }
        }
    })
</script>
  1. 对象实现
# 读取对应样式的值
<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对一些方法进行了包装和变异,以后数组通过这些方法进行数组更新,会触发视图的更新
  1. push():添加元素
this.books.push("duke")
  1. pop():删除数组最后一个元素。
this.books.pop()
  1. shift():删除数组的第一个元素
this.books.shift()
  1. unshift(item):在数组的开头位置添加一个元素。
this.books.unshift("duke")
  1. 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,'百年孤独','骆驼祥子')
  1. sort(function):排序。
 this.books.sort(function(x,y){
     // 取两个随机数排序
     a = Math.random();
     b = Math.random();
     return a-b;
 });
  1. reverse():将数组元素进行反转。
this.books.reverse();
  • 视图更新注意事项
  1. 直接修改数组中的值不会触发视图更新。
this.books[0]='Python';

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

Vue.set(this.books,0,'Python');
  1. 动态的给对象添加属性也不会触发视图更新,只能使用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>
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue.js是一种轻量级的前端JavaScript框架,用于快速构建用户界面。学习Vue的一种常见方式是通过官方文档,其中包含有关Vue的详细信息和示例。 步骤如下: 1. 安装Vue:可以在命令行中使用以下命令安装Vue: ``` npm install -g vue ``` 2. 创建一个Vue项目:可以使用Vue CLI来创建一个新的Vue项目。运行以下命令之一来安装Vue CLI: ``` npm install -g @vue/cli # OR yarn global add @vue/cli ``` 然后,使用以下命令创建一个新的Vue项目: ``` vue create my-project ``` 3. 学习Vue基础知识:Vue的基础知识包括模板语法、组件、数据绑定、计算属性、事件处理等。您可以在官方文档中找到有关这些主题的详细信息。 4. 进一步学习Vue:学习Vue的其他主题,如路由、状态管理、服务端渲染等。您可以在官方文档中找到有关这些主题的详细信息。 5. 实践:构建一个完整的Vue应用程序,并尝试使用Vue来解决实际问题。这将帮助您加深对Vue的理解,并提高您的编码能力。 希望这些信息能帮助 ### 回答2: 要学习前端Vue框架,以下是几个步骤和建议: 1. 学习HTML、CSS、JavaScript基础知识:Vue是基于这些技术的,掌握它们对于学习Vue很重要。 2. 了解Vue基本概念:Vue是一个用于构建用户界面的渐进式JavaScript框架。了解Vue的核心概念,如组件、数据绑定、指令、事件等,是学习Vue的基础。 3. 官方文档:Vue官方提供了详细的文档和教程,从官方文档开始学习是一个很好的选择。官方文档提供了示例代码,可以帮助理解每个概念和用法。 4. 实践项目:通过实践项目来巩固所学的知识。可以先从简单的项目开始,逐渐提升难度。这有助于理解Vue使用场景和开发方式。 5. 社区资源:参与Vue社区,查看和学习其他人的经验和代码。Vue有很多活跃的社区和资源,如GitHub、Stack Overflow、Vue论坛等。 6. 边学边用:在实际项目中应用所学的知识。通过实践中遇到的问题和挑战,不断提高自己的技能。 7. 持续学习:Vue框架不断更新和演进,保持学习的持续性非常重要。关注Vue的最新动态,学习新的特性和最佳实践。 总之,学习前端Vue框架需要坚实的HTML、CSS、JavaScript基础,通过官方文档、实践项目和社区资源来理解和应用Vue的概念和技术,同时保持持续的学习和实践。这样才能不断提升自己在Vue开发中的能力。 ### 回答3: 学习前端Vue框架可以按照以下步骤进行: 1. 理解基本概念:Vue是一个基于JavaScript的开源前端框架,因此在学习之前需要了解HTML、CSS和JavaScript的基础知识。同时,了解Vue基本概念,如指令、组件、生命周期等,会有助于更好地理解和使用Vue。 2. 学习Vue的核心特性:Vue提供了丰富的特性来简化前端开发,比如数据绑定、组件化开发、路由、状态管理等。可以通过阅读官方文档、教程和示例来学习这些特性的使用方法和最佳实践。 3. 实践项目:学以致用是学习的最佳方式之一。通过实践项目能够更深入地理解Vue的用法和原理。可以选择一些简单的项目来开始,逐渐增加项目的复杂性和难度,提高自己的实践能力。 4. 多参与社区:前端开发是一个活跃的社区,通过参与社区可以与其他开发者交流、分享和学习经验。可以加入Vue的官方论坛、社交媒体社群或参加相关的技术会议,与其他开发者互动,获取更多的资源和指导。 5. 持续学习和更新知识:前端技术快速更新,因此需要保持持续学习的态度。关注Vue框架的最新版本和变化,并阅读相关的更新文档和技术博客,了解最新的发展趋势和前沿技术。 总之,学习前端Vue框架需要掌握基础知识、理解核心特性、实践项目、参与社区和持续学习。通过系统学习和不断实践,可以逐步掌握Vue框架使用和进阶技巧,提升前端开发能力。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值