脚本宝典收集整理的这篇文章主要介绍了vue系列:Vue核心概念及特性 (一),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
大家好,我是前端岚枫,一枚二线城市的程序媛,下半年对于我们来说是比较特殊的几个月,7月底,郑州出现好多年不遇的水灾,没法出行,在家休息,8月出现了疫情,在家办公一个月,9月疫情过去,终于能来公司上班了。博客也荒废了一段时间,接下来,我会陆续更新一些vue相关的文章,跟一家一起努力进步
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。 特点: 易用,灵活,高效 渐进式框架
可以随意组合需要用到的模块 vue + components + vue-router + vuex + vue-cli
框架与库之间最本质区别在于控制权F1a;you call libs, frameworks call you
Vue属于框架
在传统的mvc中除了model和view以外的逻辑都放在了controller中,导致controller逻辑复杂难以维护,在mvvm中view和model没有直接的关系,全部通过viewModel进行交互
Vue是MVVM模式
允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在使用数据前需要先声明
<div id="app">
{{ 1+1 }}
{{ msg == 'hello'?'yes':'no' }}
{{ {name:1} }}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
msg:'hello'
}
})
</script>
Vue中使用Object.definePRoPErty
重新将对象中的属性定义,如果是数组的话需要重写数组原型上的方法
function notify() {
console.LOG('视图更新')
}
let data = {
name: 'jw',
age: 18,
arr: [1,2,3]
}
// 重写数组的方法
let oldProtoMehtods = Array.prototype;
let proto = Object.create(oldProtoMehtods);
['push', 'pop', 'shift', 'unshift'].forEach(method => {
proto[method] = function (...args) {
let inserted;
swITch (method) {
case 'push':
case 'unshift':
inserted = args;
break;
}
observerArray(inserted)
notify();
oldProtoMehtods[method].call(this, ...args)
}
})
function observerArray(obj) { // 观察数组中的每一项
for (let i = 0; i < obj.length; i++) {
observer(obj[i]);
}
}
function observer(obj) {
if(typeof obj !== 'object'){
return obj
}
if (Array.isArray(obj)) {
obj.__proto__ = proto
observerArray(obj);
}else{
for (let key in obj) {
defineReactive(obj, key, obj[key]);
}
}
}
function defineReactive(obj, key, value) {
observer(value); // 再一次循环value
Object.defineProperty(obj, key, { // 不支持数组
get() {
return value;
},
set(val) {
notify();
observer(val);
value = val;
}
});
}
observer(data);
data.arr.push({name:'jw'})
console.log(data.arr);
缺陷
vm.$set
和vm.$delete
方法强制添加/删除响应式数据
特点: 使用对象的时候 必须先声明属性 ,这个属性才是响应式的
<!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">{{name}} {{age.age}}</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data(){
return {name:'zf',age:{}}
}
});
// 1) vue有个特点 不会在本轮代码执行的时候 去重新渲染dom
// 2) 下一个事件环中执行 (promie.then mutationobserver setimmediate settimeout)
// 这里会等待数据更新后重新调用回调函数
// 视图是异步更新的
vm.$watch("name",function (newValue,oldValue) {
console.log(newValue,'后');
});
// vm.name = 'jw';
// vm.name = 'zf1';
// 数据更新后会有一个队列 将watch的callback放到队列中,会将nextTick往后叠加
vm.$nextTick(()=>{
console.log(vm.$el.innerHTML); // 渲染后的真实dom
});
console.log('vm的数据',vm.$data); // 代表 当前实例的数据
console.log('vm中的options',vm.$options);
// vm.$set vm.$delete 帮我更新属性的
// 新增的属性不会导致视图更新 ,更改数组索引也不会更新
// vm.age.age = 100;
vm.$set(vm.age,'age',100); // Object.defineProperty
// vm.$set([1,2,3],'0',100);
// vm.$el
// vm.$options
// vm.$watch
// vm.$nextTick
// vm.$set
</script>
</body>
</html>
在vue中 指令 (Directives) 是带有 v- 前缀的特殊特性,主要的功能就是操作DOM
<div v-once>{{state.count}} </div>
<div v-html="text"></div>
动态绑定属性需要使用v-bind
进行绑定
<img v-bind:src="src">
可以使用:来简写
v-bind
<template v-for="(fruit,index) in fruits" >
<li :key="`item_${index}`">{{fruit}}</li>
<li :key="`fruit_${index}`">{{fruit}}</li>
</template>
多个元素循环时外层需要增加
template
标签,需要给真实元素增加key
,而且key
不能重复,尽量不要采用索引作为key
的值
举个key
值的例子:
v-if
可以切换DOM
元素是否存在,并且v-if
为false
时内部指令不会被执行 v-show
可以控制元素的显示及隐藏,主要控制的是元素样式
<input type="text" :value="value" @input="input">
<input type="text" v-model="value">
<select v-model="select">
<option
v-for="fruit in fruits"
:value="fruit">
{{fruit}}
</option>
</select>
<input type="radio" v-model="value" value="男">
<input type="radio" v-model="value" value="女">
<input type="checkbox" v-model="checks" value="游泳" >
<input type="checkbox" v-model="checks" value="健身">
<input type="text" v-model.number="value">
<input type="text" v-model.trim="value">
<!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">
<!-- {{}} 小胡子语法 取值 能运算(算出来得有返回结果) 做三元表达式 -->
{{name}}
{{1+1}}
{{[1,2,3]}}
{{true?'是':null}}
<!-- 取对象 必须空格隔开 -->
{{ {name:'123'} }}
<span v-once>一次 {{name}}</span>
<!-- 不要将用户输入的内容显示到页面上 xss攻击 -->
<!-- 后端返回的数据 可以通过v-html来格式化 -->
<span v-html="tmp"></span>
<!-- 动态绑定 -->
<div v-bind:title="name">你好</div>
<!-- 绑定的是一个变量属性 -->
<div :title="name">你好</div>
<!-- v-for 循环数据 数组 对象 数字 (字符串) -->
<!-- 要循环谁 就将 v-for 写到谁的身上 -->
<!-- vue的中的key 有什么作用 区分元素,如果我有个按钮做反序 -->
<!-- 只是静态 展示可以使用这个索引 使用唯一的key 来区分元素-->
<!-- 每次循环时候可以自己拼接一些内容保证唯一性 -->
不渲染
<div v-if="false">
<template v-for="(fruit,index) in arr" >
<li :key="`name_${index}`">
{{fruit.name}}
</li>
<li :key="`color_${index}`">
{{fruit.color}}
</li>
</template>
</div>
<!-- v-if (操作dom是否显示)) v-show(显示隐藏 style) -->
<!-- 指令的功能是封装dom 操作的 -->
<!-- v-for 和 v-if 不要一起用 -->
<!-- v-show 不能和template一起用 -->
<!-- vue默认会采用复用的策略 会复用代码 -->
<template v-if="isShow">
<span>你好</span>
<input type="text" key="1">
</template>
<template v-else>
<span>不好</span>
<input type="text" key="2">
</template>
<!-- 双向绑定 只要能改的 组件也可以双向绑定 -->
<br>
<!-- 如何绑定方法 v-on是@的全拼-->
<!-- $event指代的是事件源 -->
<input type="text" :value="value" @input="fn($event)">
<!-- 很长 -->
<input type="text" :value="value" @input="e=>value=e.target.value">
<!-- v-model 他就是上面的简写 语法糖 -->
<input type="text" v-model="value">
{{value}}
</div>
<!--
v-once
v-html
v-bind
v-for
v-if / else show
v-model 双向绑定
-->
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
methods:{// 就是把所有的方法的this 都变成vm,bind了 多次bind 不会生效
fn(e){ // this指代的都是window
this.value = e.target.value
}
},
data() {
return {
value:'你好',
isShow:true,
tmp:'<h1>我很帅</h1>',
name: 'zf',
arr:[{name:'橘子',color:'绿色'},{name:'香蕉',color:' 黄色'}]
}
}
});
</script>
</body>
</html>
<input type="text" v-focus.color="'red'">
Vue.directive('focus',{
inserted:(el,bindings)=>{
let color = bindings.modifiers.color;
if(color){
el.style.boxShadow = `1px 1px 2px ${bindings.value}`
}
el.focus();
}
});
<div v-click-outside="change">
<input type="text" @focus="flag=true" >
<div v-show="flag">
contenter
</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
flag:false
},
methods:{
change(){
this.flag = false
}
},
directives:{
'click-outside'(el,bindings,vnode){
document.addEventListener('click',(e)=>{
if(!el.contains(e.target,vnode)){
let eventName = bindings.exPression;
vnode.context[eventName]()
}
})
}
}
})
</script>
以上是脚本宝典为你收集整理的vue系列:Vue核心概念及特性 (一)全部内容,希望文章能够帮你解决vue系列:Vue核心概念及特性 (一)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。