学习Vue框架中必掌握的重点知识
一、什么是vue
vue是一套用于构建用户页面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二、与原生JS的区别
我们可以通过一个小案例来演示
案例：把输入框中的信息实时显示在span标签中
原生JS
<body>
<input id='txt' type="text">
<span id='con'></span>
</body>
<script>
document.querySelector('#txt').addEventListener('keyup', function () {
document.querySelector('#con').innerHTML = this.value
})
</script>
Vue
<body>
<div id="app">
<input id='txt' type="text" v-model="msg">
<span id='con'>{{msg}}</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
msg: ""
}
})
</script>
区别：其中明显的区别就是省去了对DOM元素的操作
总结：
- 创建DOM元素，使其成为Vue实例的挂载点，Vue实例中的所有数据这能在挂载点中使用
<div id=app> </div>
- 通过
new Vue来创建实例对象 el属性指定当前Vue实例的挂载点data中是模型数据，这些数据依赖于当前Vue的实例，可以通过控制台输入app.msg来查看数据- 可以通过插值表达式使用data中的数据
三、数据绑定
数据绑定就是将Vue实例中的data属性中的数据显示在挂载点中
1、内容绑定
将data中的数据显示成内容
<div id='app'>
<p>{{msg}}</p>
</div>
若想显示html标签只要是标签中用v-html即可
<div id='app'>
<p v-html>{{msg}}</p>
</div>
2、属性绑定
将data中的数据作为某个元素的属性值
使用v-bind即可，属性可以是内置的，也可以自定义的,简写方式:
<p v-bind:id="id" :class="class">{{msg}}</p>
3、表单标签的值
可以使用v-model指令在表单标签中使用双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
1、文本框和文本域
<input type:'text' v-model="msg"></input> <textarea v-model:'msg'><textarea>
2、复选框
<div id='app'>
<lable for:'swim'><lable>
<input type='checkbox' id=swim v-model='isSwim'/>
<label for="read">阅读</label>
<input type="checkbox" id="read" v-model="isRead">
<label for="play">游戏</label>
<input type="checkbox" id="play" v-model="isPlay">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
isSwim:true,
isRead:true,
isPlay:false
}
})
</script>
单选框
<div id="app">
<label for="man">男</label>
<input type="radio" id="man" value="man" v-model="gender">
<label for="women">女</label>
<input type="radio" id="women" value="women" v-model="gender">
{{gender}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
gender:''
}
})
</script>
下拉框
<div id="app">
<select v-model="city">
<option disabled value="">请选择</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
{{city}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
city:""
}
})
</script>
传递参数
<div id='app'>
<button v-on:click="showInfo('hello')">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
title:"元旦"
},
methods:{
showInfo:function(message){
console.log(message)
}
}
})
</script>
四、事件处理
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<div id=app> <button v-on:click='greet'></button> </div>
var app = new Vue({
el:'#app',
data:{
name:'holle Vue'
},
//在 methods 中定义方法
methods:{
greet:function(event){
//this在方法中指向Vue实例
alert(this.name + '!')
if (event) {
alert(event.target.tagName)
}
}
})
五、列表渲染
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<div id='app'>
<ul>
<li v-for="blog in blogs">{{blog}}</li>
</ul>
<ul>
<li v-for="stu in stus">姓名：{{stu.name}} 年龄：{{stu.age}}</li>
</ul>
</div>
var app = new Vue({
el:"#app",
data:{
blogs:['三国演习','西游记','老夫子'],
stus:[
{name:'小明',age:18},
{name:'小张',age:11},
{name:'小王',age:12}
]
}
})
从服务器中获取数据
<body>
<div id="app">
<ul>
<li v-for="item in books">{{item.title}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
books: [],
},
created: function () {
fetch('data.json')
.then((res) => {
return res.json()
})
.then((res) => {
this.books = res
})
},
})
</script>
六、条件渲染
1、v-if指令用于条件性的渲染一块内容
<div v-if=true>hello Vue</div>
2、也可以使用v-else添加一个else块
<div v-if=false>hello Vue</div> <div v-else>hello world</div>
3、在<template>元素上使用v-if条件渲染分组
当需要切换多个元素的时候可以把v-if添加到template内，因为<template>元素是一个不可见元素，渲染的结果将不包含<template>元素
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
4、v-if-else顾名思义就是充当v-if的else if块，可连续使用
<div v-if="score==100"> 满分 </div> <div v-else-if="score>=80 && score<100"> 良好 </div> <div v-else-if="score>=70 && score<=60"> 及格 </div> <div v-else-if="score<60"> 不及格 </div> <div v-else> 请输入正确的成绩 </div>
5、v-show同样是根据条件展示元素
<div v-show="ok">hello</div>
与v-if不同的是v-show的元素会始终被渲染并保留在DOM中。
一般来说，
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
七、Class与Style绑定
我们可以使用v-bind来绑定类名或内联样式
绑定class,以动态的切换class,也可以与普通的class共存
<div class="static" v-bind:class="{active:isActive,'text-danger:hasError'}"></div>
data{
isActive:true
hasError:false
}
渲染结果为：
<div class='static active'></div>
绑定内敛级样式
语法v-bind:style
<div v-bind:style='{color:activeColor,fontSize:fontSize+'px'}'></div>
data:{
activeColor:"red",
fontSzie:13
}
也可以直接绑定到一个样式对象中，这样会使模板更清晰
<div v-bind:style="active"></div>
data:{
active:{
color:'red',
fontSize:'30px'
}
}
八、计算属性
当我们需要计算模板中的值时可以使用计算属性（computed）
<div id="#app">
<p>{{message}}</p>
<p>{{reverseMessage}}</p>
</div>
var app = new Vue({
el:"#app",
data:{
message:"Hello"
},
computed:{
reverMessage(){
return this.message.split('').reverse().join('')
}
}
})
九、侦听器
侦听器可以观察和响应Vue实例上的数据变动
<div id="app">
<div>
问题：<input v-model="question">
</div>
<div>{{answer}}</div>
</div>
var app = new Vue({
el: "#app",
data: {
question: "",
answer: [],
},
watch: {
question(newValue) {
this.getAnswer()
}
},
methods: {
getAnswer: function () {
let that = this
axios.get('http://localhost:3000/answer.php?q=' + this.question)
.then(function (response) {
that.answer = response.data
})
}
}
})
php代码
<?php
$question = $_GET['q'];
$answer=[];
switch($question){
case "小":
$answer=['小孩子','小姐姐','小鲜肉'];
break;
case "小鲜肉":
$answer=['小鲜肉是什么','小鲜肉有什么用','小鲜肉可以吃吗'];
break;
case "小鲜肉演戏":
$answer=["小鲜肉演戏太假","小鲜肉被封杀","小鲜肉不会做演员"];
break;
}
echo json_encode($answer);
?>
演示
nswer = response.data
php代码
```php
<?php
$question = $_GET['q'];
$answer=[];
switch($question){
case "小":
$answer=['小孩子','小姐姐','小鲜肉'];
break;
case "小鲜肉":
$answer=['小鲜肉是什么','小鲜肉有什么用','小鲜肉可以吃吗'];
break;
case "小鲜肉演戏":
$answer=["小鲜肉演戏太假","小鲜肉被封杀","小鲜肉不会做演员"];
break;
}
echo json_encode($answer);
?>
演示
十、插槽
插槽内容
var el_div = {
template:
<div><slot></slot></div>
}
<div id=app> <el-div> <span>插槽内容</span> </el-div> </div>
当组件渲染时，slot会被替换为<span>插槽内容</span>。插槽内可以包含任何模板代码
后备内容
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在一个 <submit-button> 组件中：
<button type="submit"> <slot></slot> </button>
我们可能希望这个 <button> 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在 <slot> 标签内：
<button type="submit"> <slot>Submit</slot> </button>
现在当我在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时：
<submit-button></submit-button>
后备内容“Submit”将会被渲染：
<button type="submit"> Submit </button>
但是如果我们提供内容：
<submit-button> Save </submit-button>
则这个提供的内容将会被渲染从而取代后备内容：
<button type="submit"> Save </button>
具名插槽
有时我们需要多个插槽。例如对于一个带有如下模板的 <base-layout> 组件：
<div class="container"> <header> <!-- 我们希望把页头放这里 --> </header> <main> <!-- 我们希望把主要内容放这里 --> </main> <footer> <!-- 我们希望把页脚放这里 --> </footer> </div>
对于这样的情况，<slot> 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽：
<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>
一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
<base-layout> <template v-slot:header> <h1>Here might be a page title</h1> </template> <p>A paragraph for the main content.</p> <p>And another one.</p> <template v-slot:footer> <p>Here's some contact info</p> </template> </base-layout>
现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。
然而，如果你希望更明确一些，仍然可以在一个 <template> 中包裹默认插槽的内容：
<base-layout> <template v-slot:header> <h1>Here might be a page title</h1> </template> <template v-slot:default> <p>A paragraph for the main content.</p> <p>And another one.</p> </template> <template v-slot:footer> <p>Here's some contact info</p> </template> </base-layout>
任何一种写法都会渲染出：
<div class="container"> <header> <h1>Here might be a page title</h1> </header> <main> <p>A paragraph for the main content.</p> <p>And another one.</p> </main> <footer> <p>Here's some contact info</p> </footer> </div>
以上就是学习Vue中必掌握的重点知识的详细内容，更多关于Vue重点知识的资料请关注我们其它相关文章！
相关推荐
-
浅谈Vue服务端渲染框架Nuxt的那些事
Vue因其简单易懂的API.高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐.国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的. 我们知道,SPA前端渲染存在两大痛点:(1)SEO.搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息,使网站无法在搜索引擎中被用户搜索到.(2)用户体验.大型webApp打包之后的js会很庞大,于是就有了按模块加载,像require.js一样,异步请求.webpack盛行,就变成了代码分割.即便如此,受制
-
详解vantUI框架在vue项目中的应用踩坑
1.订单提交地址等组件的应用. 使用的组件有如下: import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant' 主要是配货地址编辑这块: <van-address-edit :area-list="areaList" :address-info="addressInfo" show-postal show-delete show-set-default show-searc
-
vue+vant-UI框架实现购物车的复选框全选和反选功能
购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(item,index) in shoppingListData.rows" :key="index" > <van-checkbox :value="item.goods_id" v-model="item.isChecked" ch
-
vue前端框架—Mint UI详解（更适用于移动端）
一.mintUI简介 mint是一个基于vue的前端UI框架,而它的样式比较类似于手机的样式,可以说是一个基于vue打包app的UI框架,使用mint框架可以给使用vue打包的app的用户更好的交互体验.mint已支持vue2.0. 二.安装和引入mintUI 在安装之前首先要对vue.js有所了解,有一个建立好的vue的项目以及安装好的node.js. 执行命令npm i mint-ui -S,出现以下界面代表安装成功. 引入muitUI: 在main.js中加入 import Min
-
详解如何在vue项目中使用layui框架及采坑
根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui 1.第一个坑:vue项目中使用npm安装引入时报错(目前并没有找到引入的合适的方式,知道的可以留言探讨) 在官网中我们可以看到他提到支持npm安装,但是当我们安装成功后,在main.js中引入时却报并不能找到该模块的错. 所以,我们先下载文件包,然后在html文件中用link和script标签的方式引入 2
-
浅谈vue中$event理解和框架中在包含默认值外传参
在vue中普通方法中默认带有event DOM事件如greet方法,如果是内联函数的话如warn方法,只需要在定义方法的地方同时传入$event即可,这里需要强调的是在iview中,这里用的是select组件,在其on-change事件中如果想要传入自定义的参数,使用直接传参的方式,获取的是传入的参数,那么如何获取到该方法默认的返回值(即不传参数时返回的默认选中值),这里使用 $event传入代表选中的值,如test方法,这里似乎也只要$event可以传入代表选中的值,其他的可能就是普通的参数,
-
vue+iview框架实现左侧动态菜单功能的示例代码
最近在使用vue-cli3配合iview框架搭建新的项目中用到了iview中的menu菜单,按照官网写法固定不太好,因为一般项目都是从后端动态获取菜单列表,所以我们需要将官网代码稍作修改,代码如下: 注意事项: [1]菜单高亮部分动态绑定路由跳转的页面 Menu组件中有一个active-name反映的是当前高亮区域,因此可以动态的绑定active-name来实现高亮显示.前提是需要将MenuItem绑定的name也设置成页面路由的name [2]动态获取菜单数据,需要更新菜单 this.$nex
-
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
如下所示: 1.index.html文件入口: 2.src放置组件和入口文件: 3.node_modules为依赖的模块: 4.cofig中配置了路径端口值等: 5.build中配置了webback的基本配置.开发环境配置.生产环境配置等. main.js是我们的入口文件,主要用于初始化vue实例,并使用需要的插件. App.vue是我们的主组件,所有的页面都在App.vue下进行切换.我们可以将router标示为App.vue的子组件. 6.在每个模板中给style设置一个scoped属性,意
-
学习Vue框架中必掌握的重点知识
一.什么是vue vue是一套用于构建用户页面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 二.与原生JS的区别 我们可以通过一个小案例来演示 案例:把输入框中的信息实时显示在span标签中 原生JS <body> <input id='txt' type="text&qu
-
Vue框架中正确引入JS库的方法介绍
本文主要给大家介绍的是关于在Vue框架中正确引入JS库的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 错误示范 全局变量法 最不靠谱的方式就是将导入的库挂在全部变量window 对象下: // entry.js: window._ = require('lodash'); // MyComponent.vue: export default { created() { console.log(_.isEmpty() ? 'Lodash everywhere!' : 'U
-
vue框架中props的typescript用法详解
什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 在vue中使用typescript时,需要引入vue-pro
-
学习vue.js中class与style绑定
关于vue.js中class与style绑定的练习代码,分享给大家,供大家参考: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs中Class与Style 绑定</title> <link rel="stylesheet" href="css/vu
-
Vue框架中如何调用模拟数据你知道吗
1.框架结构 mock是模拟数据文件夹,文件夹中有index.js,里面包含所模拟的接口数据:如下所示 const Mock = require("mockjs"); const { param2Obj } = require("./utils"); const user = require("./user"); //调用方式 const mocks = [...user]; function mockXHR() { // mock patch
-
vue.js中mint-ui框架的使用方法
本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下 1.安装vue2.0的mint-ui框架 npm install mint-ui -save 2.引用和使用框架,我用的是全部组件,也可以按需选择加载相应的组件,不过要使用babel-plugin-component import Mint from 'mint-ui'; Vue.use(Mint); 3.创建一个header.vue组件,里面写入mint-ui的头部组件 <template> <mt-header
-
vue 通过下拉框组件学习vue中的父子通讯
如果说vue组件化开发中第一步应该了解的是什么的话,那无疑是父子组件之间是如何实现通讯的(说白了就是父子组件中数据是如何传递的),只有理解了这一步,才能更好的开发组件 这里先提出两个关键词: props 与 emit : 写这个组件之前,先看看效果图: 组件开发分析: 既然是组件: 首先组件内部数据内容肯定是可变的(如上图中的"按时间排序"之类的),这必须由父组件传入(即父组件如何将数据传个父组件); 在选择了内容之后,如何将数据传出来(即子组件如何将数据传给父组件) 先写结构: 父组
-
Python的Flask框架中的Jinja2模板引擎学习教程
Flask的模板功能是基于Jinja2模板引擎来实现的.模板文件存放在当前目前下的子目录templates(一定要使用这个名字)下. main.py 代码如下: from flask import Flask, render_template app = Flask(__name__) @app.route('/hello') @app.route('/hello/<name>') def hello(name=None): return render_template('hello.html