Vue 架构
vue
一、认识Vue
定义:一个构建数据驱动的 web 界面的渐进式框架
优点:
1、可以完全通过客户端浏览器渲染页面,服务器端只提供数据
2、方便构建单页面应用程序(SPA)
二、引入Vue
<div id="app">
<p title="p"></p>
<p v-bind:title='title'></p>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>
new Vue({
//挂载点
el: '#app',
data: {
title: 'vue-p'
//修改第二个title属性值
}
})
</script>
三、Vue实例
- 实例:el
<div id='app'>
</div>
<script>
new Vue({
el: '#app'
})
</script>
- 数据:data
<div id='app'>
<p v-text='msg1'></p>
<p>{{ msg2 }}</p>
{{ aa }}
{{ xx }}
{{ 3+4+5 }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg1: '段落1',
msg2: '段落2'
aa:"第一个aa对应的值",
xx:"第一个xx对应值",
}
})
</script>
data数据为挂载点内部的变量Vue变量提供值
console.log(app);得到vue实例
console.log(app.$data.msg);获取目标变量值
- 方法:methods
<div id='app'>
<p v-on:click='func'>{{ msg }}</p>
<p v-on:mouseover='over'>{{ msg }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '段落'
},
methods: {
func: function() {
alert(this.msg)
},
over (ev) {
console.log("悬浮事件")
},
}
})
</script>
methods为挂载点内部提供方法的实现体
- 计算属性:computed
<div id='app'>
<div>
姓:<input type='text' v-model='first_name'>
</div>
<div>
名:<input type='text' v-model='last_name'>
</div>
<div>
全名:<input type='text' v-model='full_name'>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
first_name: '',
last_name: ''
},
computed: {
full_name: function() {
return this.first_name + this.last_name
}
}
})
</script>
- 监听器:watch
<div id='app'>
<div>
姓名:<input type='text' v-model='full_name'>
</div>
<p>姓:{{ first_name }}</p>
<p>名:{{ last_name }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: ''
},
watch: {
full_name: function() {
this.first_name = this.full_name.split(' ')[0];
this.last_name = this.full_name.split(' ')[1];
}
}
})
</script>
多个变量依赖于一个变量, 对该变量进行监听
- 分隔符:delimiters
<div id='app'>
${ msg }
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'message'
},
delimiters: ['${', '}']
})
</script>
delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{}}。
现在我们的插值形式就变成了${}。代替了{{ }}。
- 实例对象使用成员属性与方法
<script>
var app = new Vue({
el: '#app',
data: {
msg: 'message'
}
})
console.log(app)
console.log(app.$el)
console.log(app.$data.msg)
console.log(app.msg)
</script>
四、实例生命周期钩子
- 定义
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
- 钩子方法
beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted:el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。
beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。
updated:数据更新时调用,发生在虚拟 DOM 打补丁之前。
activated:keep-alive 组件激活时调用。
deactivated:keep-alive 组件停用时调用。
beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed:Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
errorCaptured:2.5.0+ 新增,当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
- 重点钩子
created:实例完全创建完毕(属性与方法都准备就绪)。可以进行数据操作(请求后台数据,重新渲染最新数据)
mounted:虚拟DOM构建完毕,并完成实例的el挂载。可以重新操作页面DOM
五、视图常规操作
- v-text:文本变量
<p v-text='msg'></p>
<p>{{ msg }}</p>
- v-once:一次性文本赋值
<p v-once>{{ msg }}</p>
- v-html:html文本变量
<p v-html='msg'></p>
<script>
new Vue({
el: '#app',
data: {
msg: '<b>文本</b>'
}
})
</script>
- v-bind:属性绑定
<div id="app">
<img v-bind:src='imgSrc' />
<!-- 简写 -->
<img :src='imgSrc' />
</div>
<script>
new Vue({
el: '#app',
data: {
imgSrc: 'https://www.baidu.com/favicon.ico'
}
})
</script>
- v-model:双向数据绑定
<div id="app">
<input type="text" v-model='msg'>
<p>{{ msg }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: ''
}
})
</script>
- v-cloak:避免页面加载闪烁
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
</div>
- 视图自身运算
<div id="app" v-cloak>
<p>{{ 1 + 1 }}</p>
<p>{{ [1, 2, 3].join('@') }}</p>
</div>
六、条件渲染
- v-if:值true会被渲染,值false不会被渲染
<div id="app">
<div v-if='isShow'>div div div</div>
<button @click='isShow = !isShow'>改变</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
- v-else:与v-if结合使用形成对立面
<div id="app">
<div v-if='isShow'>div div div</div>
<div v-else='isShow'>DIV DIV DIV</div>
<button @click='isShow = !isShow'>改变</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
- v-else-if:变量的多情况值判断
<div id="app">
<div v-if='tag == 0'>if if if</div>
<div v-else-if='tag == 1'>else if else</div>
<div v-else='tag == 2'>else else else</div>
<input type='number' min='0' max='2' v-model='tag' />
</div>
<script>
new Vue({
el: '#app',
data: {
tag: 0
}
})
</script>
- template:不被渲染的vue结构标签
<template v-if="isShow">
<p>用template嵌套</p>
<p>可以为多行文本</p>
<p>同时显隐</p>
<p>且template标签不会被vue渲染到页面</p>
</template>
- v-show:一定会被渲染到页面,以display属性控制显隐
- key:为v-if方式的显隐创建缓存,提高效率
<div id="app">
<div v-if='tag == 0' key='0'>if if if</div>
<div v-else-if='tag == 1' key='1'>else if else</div>
<div v-else='tag == 2' key='2'>else else else</div>
<input type='number' min='0' max='2' v-model='tag' />
</div>
<script>
new Vue({
el: '#app',
data: {
tag: 0
}
})
</script>
七、列表渲染
- v-for:循环渲染列表
<div id="app">
<ul>
<li v-for='item in items'>{{ item }}</li>
</ul>
<button @click='click'>改变</button>
</div>
<script>
new Vue({
el: '#app',
data: {
items: ['张三', '李四', '王五']
},
methods: {
click: function () {
this.items.splice(1, 1, '李大大');
this.items.pop();
this.items.push('赵六')
}
}
})
</script>
- 遍历数组
// items: ['张三', '李四', '王五']
// 值
<ul>
<li v-for='item in items'>{{ item }}</li>
</ul>
// 值, 索引
<ul>
<li v-for='(item, index) in items'>{{ index }} - {{ item }}</li>
</ul>
- 遍历对象
// {'name': '张三', 'age': 18, 'sex': '男'}
// 值
<div v-for="value in object">
{{ value }}
</div>
// 值, 键
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
// 值, 键, 索引
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
- 复杂数据渲染
// items: [{'name': '张三'}, {'age': 18}, {'sex': '男'}]
<div>
<div>{{ items[0].name }}</div>
<div>{{ items[1].age }}</div>
<div>{{ items[2].sex }}</div>
</div>
Vue 架构的更多相关文章
- Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇——多页面VueSSR+热更新Server)
Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前 ...
- vue.js学习系列-第一篇
VUE系列一 简介 vue是一个兴起的前端js库,是一个精简的MVVM.从技术角度讲,Vue.js专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Mode ...
- Vue随笔记录
一.创建Vue步骤(VS Code) 1.全局安装 npm install -g vue-cli 2.新建项目 vue init webpack "project-n ...
- .Net Core+Vue.js+ElementUI 实现前后端分离
.Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构 前端采用:Vue.js.Element-UI.axios 后端采用:.Net Core Mvc 本项目是 ...
- vue初级使用
一.Vue是什么? Vue(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.采用自底向上增量开发的设计.Vue.js 的目标是通过尽可能简单的 API 实现响应 ...
- webpack+vue+koa+mongoDB,从零开始搭建一个网站
github 地址 https://github.com/wangxiaoxi... webpakc+vue的搭建1.新建项目文件夹(see-films);2.npm init //初始化项目3.搭建 ...
- Android高级工程师面试题整理
这些题目是网友去百度.小米.乐视.美团.58.猎豹.360.新浪.搜狐等一线互联网公司面试被问到的题目.熟悉本文中列出的知识点会大大增加通过前两轮技术面试的几率. 主要分为以下几部分: (1)java ...
- 《Python全栈开发指南》第3版 Alex著(LFXC2018)
第一章 Python基础——Python介绍&循环语句 1.1 编程语言介绍 1.2 Python介绍 1.3 Python安装 1.4 第一个Python程序 1.5 变量 1.6 程序交互 ...
- Java 前后端分离项目:微人事
本文适合刚学习完 Java 语言基础的人群,跟着本文可了解和运行项目,本示例是在 Windows 操作系统下演示. 本文作者:HelloGitHub-秦人 大家好!这里是 HelloGitHub 推出 ...
随机推荐
- Eclipse中项目Project Explorer视图与Package Explorer视图
Package Explorer视图: Project Explorer视图 两种视图的切换:
- Android 性能优化提示
原文 http://developer.android.com/guide/practices/design/performance.html 性能优化 Android应用程序运行的移动设备受限于其运 ...
- Dynamic CRM 2015学习笔记(3)oData 查询方法及GUID值比较
本文将比较二种查询字符串在同一个oData查询方法中的不同,另外,还将介绍如何比较不同方法返回的GUID的值. 用同一个oData查询方法,如果传入查询的字符串不一样,返回结果的格式竟然完全不一样. ...
- Nginx-Cluster 构建
nx-Cluster and ReverseProxyServer-----------ReProxy-------------------------Client-----------192.168 ...
- LOJ#510 北校门外的回忆(找性质+倍增+线段树)
这题一场模拟赛我们出了弱化版(n<=1e6),抄题面给的程序能拿到71分的好成绩 其实后面的29分是加了几个1e9的数据卡人 这糟老头子真是坏得很 正解我们机房看了三天 在这里感谢这篇题解的作者 ...
- poj 3080 Blue Jeans (暴力枚举子串+kmp)
Description The Genographic Project is a research partnership between IBM and The National Geographi ...
- bzoj3467: Crash和陶陶的游戏
就一篇题解: BZOJ3467 : Crash和陶陶的游戏 - weixin_34248487的博客 - CSDN博客 1.离线,建出Atrie树:B树的倍增哈希数组,节点按照到根路径字典序排序 2. ...
- react-native中timer的注意点
务必在卸载组件前清除定时器! 我们发现很多 React Native 应用发生致命错误(闪退)是与计时器有关.具体来说,是在某个组件被卸载(unmount)之后,计时器却仍然在运行.要解决这个问题,只 ...
- long long
1. ll a; scanf("%d",&a); 数据读入后,产生错误 2. const ll inf=1e18; 3. int * ll = ll ll * int = ...
- c#Linq联合查询
public void Test2() { var queryResult1 = from e in empArray from l in empLevelArray select new { e, ...