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 推出 ...
随机推荐
- jsp配置
jsp.server.xml <Host name="localhost" appBase="webapps" unpackWARs="true ...
- P2521 [HAOI2011]防线修建
题目链接:P2521 [HAOI2011]防线修建 题意:给定点集 每次有两种操作: 1. 删除一个点 (除开(0, 0), (n, 0), 与指定首都(x, y)) 2. 询问上凸包长度 至于为什么 ...
- HDU 6336 Matrix from Arrays (杭电多校4E)
遇事不决先打表. 然后会发现(个屁)大的矩形是由一个2L*2L的矩形重复出现组成的然后我们就可以这个矩形分成四个点到(0, 0)点的矩形,这样问题就变成了求四个到顶点(0, 0)的矩形的面积,然后就先 ...
- bzoj3514(LCT+主席树)
题目描述 N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. 题解 对于一个截止时间来说,越晚的变越好. 所以我们可以维护一颗以边的序号为关键字的最大生成树,然后用主席树维 ...
- 定时自动从FTP服务器取数据脚本
环境需求:某些情况下经常需要向FTP服务器取文件,可以用定时任务执行简单脚本自动去取相应文件. 一般用法: ~]# ftp IP地址 端口 //ftp命令可以通过yum install ftp方式 ...
- 两数之和 II - 输入有序数组
题目描述 给定一个已按照升序排列 的有序数组,找到两个数使得它们相加之和等于目标数. 函数应该返回这两个下标值 index1 和 index2,其中 index1 必须小于 index2. 说明: 返 ...
- 区块链使用Java,以太坊 Ethereum, web3j, Spring Boot
Blockchain is one of the buzzwords in IT world during some last months. This term is related to cryp ...
- CF1153F Serval and Bonus Problem
Serval and Bonus Problem 1.转化为l=1,最后乘上l 2.对于一个方案,就是随便选择一个点,选在合法区间内的概率 3.对于本质相同的所有方案考虑在一起,贡献就是合法区间个数/ ...
- MySQL事务,事务隔离级别详解
1.什么是事务 指作为单个逻辑工作单元执行的一系列操作,要么完全地执行,要么完全地不执行. 2.事务的4个特性 原子性(Atomicity).一致性(Consistency).隔离性(Isolatio ...
- springboot整合jsp
由于不想使用新模版,增加学习成本,故此延用jsp: 1.pom 文件 <!-- jsp --> <dependency> <groupId>org.apache.t ...