Vue(核心思想)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue(核心思想)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8063字，纯文字阅读大概需要12分钟。
内容图文
1.Es6语法普及
- let和var的区别:
-
var:定义变量时,在全局范围内都有效;所以在变量没有声明之前就能使用,值为undefined, 称为变量提升; let:声明的变量一定要在声明后使用,而且在for循环时,变量都会被重新定义 -
let不允许在相同的作用域内,重复声明一个变量; // 报错 function func() { let a = 10; var a = 1; } // 报错function func() { let a = 10; let a = 1; } 所以,在函数内部重新声明参数也报错 function func(arg) { let arg; // 报错} function func(arg) { { let arg; // 不报错 } } - const命令
- const声明一个只读的常量,一旦声明,常量的值不能修改;
- 所以const一旦声明,就必须立即初始化,不能留着以后赋值,只声明不赋值也报错;
2.模板字符串
-
- ``:在输出模板是,可以在里面输出标签叠加
- ${变量名}:在字符串中嵌入变量时,跟反引号配合着使用,在script中使用,在页面没办法渲染,而{{}}是vue插入值的语法,可以在模板上渲染;
-
// 普通字符串 `In JavaScript ‘\n‘ is a line-feed.` // 多行字符串 `In JavaScript this is not legal.` console.log(`string text line 1 string text line 2`); // 字符串中嵌入变量 let name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?`
3.箭头函数
-
-
let f = a => a //等价于 let f = function(a){ return a} let f = () => 5 //等价于 let f=function()=>{return 5} let sum = (sum1, sum2) => sum1+sum2; // 等同于 var sum = function(num1, num2) { return num1 + num2; }; - 注意事项:函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象
-
- import和export
-
//导出多个声明 export let name = ‘gx‘ export function aa(){} export {age,name,aa} //批量导出 import {age,name,aa} from ‘./main‘ console.log(name) console.log(age) console.log(aa()) // 整个模块导入 把模块当做一个对象 // 该模块下所有的导出都会作为对象的属性存在 import * as obj from "./main" / 一个模块只能有一个默认导出 // 对于默认导出 导入的时候名字可以不一样 // main.js var app = new Vue({ }); export default app // test.js // import app from "./main" import my_app from "./main"
2.Vue的基础语法及命令
<
template
>
<
div
>
<
h2
>head</h2><p v-text="msg"></p><p v-html="html"></p></div></template><script>
export default {
name: "head",
data(){
return {
msg: "消息",
html: `<h2>插入h2标题</h2>`
}
}
}
</script>
//双向监听事件(model)页面上修改,会自动触发后端修改,后端修改,会被一直尝试连接的客户端重新渲染;
<
div
id
="app"
>
<
label
>
男
<
input
type
="checkbox"
v-model
="sex"
value
="male"
>
//
<
input
type
="radio"
v-model
="sex"
value
="male"
>
</
label
>
<
label
>
女
<
input
type
="checkbox"
v-model
="sex"
value
="female"
>
</
label
>
{{sex}}
</
div
>
<
script
src
="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"
></
script
>
<
script
src
="../js/main.js"
></
script
>
// main.js 页面
var app = new Vue({
el: ‘#app‘,
data: {
// sex: "male",
sex: [],
}
});
// HTML 页面
<
div
id
="app"
>
<
div
>
<
texteare
v-model
="article"
>
</
texteare
>
</
div
>
</
div
>
<
script
src
="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"
></
script
>
<
script
src
="../js/main.js"
></
script
>
// main.js 页面
var app = new Vue({
el: ‘#app‘,
data: {
// sex: "male",
sex: [],
article: "这是一段文本。。这是一段文本。。这是一段文本。。这是一段文本。。这是一段文本。。"
}
});
// HTML页面
<
div
id
="app"
>
<!--
<select v-model="from">
-->
<!--
<option value="1">单选1</option>
-->
<!--
<option value="2">单选2</option>
-->
<!--
</select>
-->
<!--
{{from}}
-->
<
select
v-model
="where"
multiple
=""
>
<
option
value
="1"
>多选1</option><option value="2">多选2</option><option value="3">多选3</option></select>
{{where}}
</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="../js/main.js"></script>
// main.js 页面
var app = new Vue({
el: ‘#app‘,
data: {
from: null,
where: [],
}
});
v-model select
//其他命令
//v-bind:动态绑定属性
<
style
>
.active
{
background
:
red
;
}
</
style
>
<
div
id
="app"
>
<
div
>
<!--
<a v-bind:href="my_link">点我</a>
-->
<
a
v-bind:href
="my_link"
:class
="{active: isActive}"
>
点我
</
a
>
</
div
>
</
div
>
<
script
src
="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"
></
script
>
<
script
src
="../js/main.js"
></
script
>
// main.js
var app = new Vue({
el: ‘#app‘,
data: {
my_link: "http://baidu.com",
isActive: true,
}
});
//v-show:动态管理是否显示标签:本质是给标签添加了display属性
<
div
id
="app"
>
<
button
@click
="on_click()"
>
点我
</
button
>
<
p
v-show
="show"
>提示文本</p></div>
// main.js 页面
var app = new Vue({
el: ‘#app‘,
data: {
show: false,
},
methods: {
on_click: function () {
this.show = !this.show
}
}
});
//v-if:跟v-show的结果一样,但是v-if是通过append child DOM树和删除DOM树实现
<div><div v-if="role == ‘admin‘ || ‘super_admin‘">管理员你好</div><div v-else-if="role == ‘hr‘">待查看简历列表</div><div v-else> 没有权限</div></div>
// main.js 页面
var app = new Vue({
el: ‘#app‘,
data: {
role: ‘admin‘,
// role: ‘hr‘,
},
});
//v-on:绑定事件只能绑定DOM中存在的事件,简写为: @click=‘Myclick‘
<div><span>事件</span><button v-on="{mouseenter: onMouseenter, mouseleave: onMouseleave}" v-on:click="onClick(1)">点我</button></div><div><input type="text" v-on="{keyup: onKeyup}"></div>
// main.js
var app = new Vue({
el: ‘#app‘,
data: {
my_link: "http://baidu.com",
isActive: true,
},
methods: {
onClick: function (a) {
alert(a)
},
onMouseenter: function () {
console.log("mouse enter")
},
onMouseleave: function () {
console.log("mouse leave")
},
onKeyup: function () {
console.log("key up")
}
},
});
//指令修饰符
// 我们现在要获取用户的注册信息
// 用户名以及手机号 用指令修饰符能够让我们更加便捷
// HTML 页面
<
div
>
用户名:
<
input
type
="text"
v-model.lazy.trim
="username"
><
br
>
{{username}}
手机号:
<
input
type
="text"
v-model.number
="phone"
><
br
>
{{phone}}
</
div
>
// main.js 页面
var app = new Vue({
el: ‘#app‘,
data: {
username: "",
phone: "",
},
});
指令修饰符
lazy:model是双端数据显示,你只要修改,对应值就跟着改变,lazy是把失焦之后触发model
number:前端在 传输数据时一直是字符串,而有些地方需要用数字
//vue的计算属性
// 现在我们有一个成绩的表格 来计算总分和平均分
// HTML页面
<
div
id
="app"
>
<
table
border
="1"
>
<
thead
>
<
th
>学科</th><th>分数</th></thead><tbody><tr><td>数学</td><td><input type="text" v-model.number="math"></td></tr><tr><td>物理</td><td><input type="text" v-model.number="physics"></td></tr><tr><td>英语</td><td><input type="text" v-model.number="english"></td></tr><tr><td>总分</td><!--<td>{{math+physics+english}}</td>--><td>{{sum}}</td></tr><tr><td>平均分</td><!--<td>{{Math.round((math+physics+english)/3)}}</td>--><td>{{average}}</td></tr></tbody></table></div>
// js 页面
var app = new Vue({
el: ‘#app‘,
data: {
math: 90,
physics:88,
english: 78,
},
computed: {
sum: function () {
var total = this.math + this.physics + this.english
return total
},
average: function () {
var average_num = Math.round(this.sum/3)
return average_num
}
}
});
计算属性 computed
//vue的过滤器
// 我们两个需求 一个是价格展示后面自动加“元”
// 单位 毫米和米的转换
// HTML页面
<
div
>
<
p
>价格展示</p><input type="text" v-model="price">
{{price | currency(‘USD‘)}}
</div><div><p>换算</p><input type="text" v-model="meters">
{{meters | meter}}
</div>
// js 代码
Vue.filter(‘currency‘, function (val, unit) {
val = val || 0;
var ret = val+ unit
return ret
});
Vue.filter(‘meter‘, function (val) {
val = val || 0;
return (val/1000).toFixed(2) + "米"
});
new Vue({
el: ‘#app‘,
data: {
price: 10,
meters: 10,
}
});
过滤器 filter
3.获取DOM元素
:vue对象中是一个一个键值对,有一个$refs属性,这里面有你给标签自定义的属性ref
<
style
>
.box
{
width
:
200px
;
height
:
200px
;
border
:
solid 1px red
;
}
</
style
>
</
head
>
<
body
>
<
div
id
="app"
>
<
div
class
="box"
ref
="my_box"
>
这是一个盒子
</
div
>
</
div
>
<
script
>
const app
=
new
Vue({
el:
"
#app
"
,
mounted(){
this
.$refs.my_box.style.color
=
"
red
"
;
}
})
</
script
>
</
body
>
4.事件监听
数据被渲染时,字符串会被立即渲染,
但是对象和数组只能监测到长度是否改变,而改变了特定的值时,监听不到
所以有一个app.$set(this.数组, 索引, ‘值‘)
5.每个组件的template:只能包括一个作用域块;
原文：https://www.cnblogs.com/0627zhou/p/9953264.html
内容总结
以上是互联网集市为您收集整理的Vue(核心思想)全部内容，希望文章能够帮你解决Vue(核心思想)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】