vue one
复习
"""
1、BBS：前后台不分离的web项目
前台页面主要是通过后台逻辑完成渲染
2、Django：Python Web 框架
HttpResponse | ORM | 模板语言 | Forms | Auth
3、前端：HTML5 CSS3 JavaScript jQuery Bootstrap
HTML5：页面架构
CSS3：选择器 样式 布局
JS：ES DOM BOM => 选择器拿到标签，操作标签，标签事件完成交互
DOM驱动 => Vue数据驱动
"""
Vue框架
# Angular React Vue
对于js做了底层的封装和改造，优化底层机制，效率高。angular和react融合进行发布了vue
# js渐进式框架：一个页面小到一个变量，大到整个页面，均可以有vue控制，vue也可以控制整个项目
页面之间是相互独立的，页面之间的关系就是数据之间的传输
# 思考：vue如何做到一次引入控制整个项目 => 单页面应用 => vue基于组件的开发（组件是让页面花里胡哨）
每个页面都称之为页面组件，任何一个组件都是由css,js html来组成，页面的转跳就是组件的删除和替补
# vue的工作原理：vue如何渲染一个页面
# vue的组件概念
相当于后台的的视图函数
# vue路由的概念
一个个连接和组件之间的关系（点击哪个连接就显示哪个组件就是页面的转跳）
# vue的ajax概念 ajax封装原生js请求后台数据而来的
vue axios vue也要前后端交互
# 学习曲线：vue的指令 vue的实例成员 vue组件 vue项目开发
Vue的优点
"""
1.单页面：高效 （io低，流量低）
2.虚拟DOM：页面缓存 （组件删除，组件替换，但不是立马删除而是在内存中缓存）
vue会把数据渲染到虚拟dom，我们操控就是虚拟dom，然后虚拟dom再渲染到真实dom展示给用户看
3.数据的双向绑定：数据是具有监听机制
4.数据驱动：从数据出发，不是从DOM出发
"""
Vue的使用
"""
1.下载vue.js：https://vuejs.org/js/vue.js
2.在要使用vue的html页面通过script标签引入
3.在html中书写挂载点的页面结构，用id表示
4.在自定义的script标签实例化Vue对象，传入一个大字典
5.在字典中通过 el与挂载点页面结构绑定，data为其通过数据
"""
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue初识</title>
</head>
<body>
<div id="app">
<!-- {{ vue变量 }} 插值表达式 -->
<h1>{{ h1_msg }}</h1>
<h2>{{ h2_msg }}</h2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app', // 挂载点
data: { // 为挂载点的页面结构提高数据
h1_msg: 'h1的内容',
h2_msg: 'h2的内容',
}
})
</script>
</html>
vue完成简单的事件
<div id="app">
<h1 v-on:click="clickAction">h1的内容是{{ msg }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'vue渲染的内容'
},
methods: { // 为挂载点提供事件的
clickAction: function () {
alert(123)
}
}
})
</script>
vue操作简单样式
<div id="app">
<p v-on:click="btnClick" v-bind:style="v_style">点击p文字颜色变为绿色</p>
<div v-on:click="btnClick" v-bind:style="v_style">点击div文字颜色变为绿色</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v_style: {
color: 'black'
}
},
methods: {
btnClick: function () {
this.v_style.color = 'green'
}
}
})
</script>
小结
"""
1.vue通过 v-* 指令来控制标签
2.vue通过 变量 来驱动页面
"""
指令
文本指令
<div id="app">
<!-- 插值表达式就是 v-text -->
<p>{{ msg1 }}</p>
<p v-text="msg2"></p>
<!-- 可以解析html标签 -->
<p v-html="msg3"></p>
<!-- 必须赋初值，渲染的结果永远不会发生改变 -->
<p v-once="msg3" v-on:mouseover="action">{{ msg3 }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg1: '**msg1**',
msg2: '<b>**msg2**</b>',
msg3: '<b>**msg3**</b>',
},
methods: {
action: function () {
// var msg = this.$data.msg4;
this.msg3 = '<i>**new msg3**</i>'
}
}
})
</script>
事件指令
<div id="app">
<!-- v-on:事件名="函数名" 可以简写为 @事件名="函数名" （v-on: => @）-->
<p v-on:click="action1">{{ msgs[0] }}</p>
<p @click="action2">{{ msgs[1] }}</p>
<!-- 事件的传参 -->
<ul>
<li @click="liAction(100)">列表项1</li>
<li @click="liAction(200)">列表项2</li>
<li @click="liAction(300)">列表项3</li>
</ul>
<!-- 鼠标事件的对象：直接写函数名，默认将鼠标事件对象传入 -->
<div @click="func1">func1</div>
<!-- 鼠标事件的对象：一旦添加(),就必须手动传参，$event就代表鼠标事件对象 -->
<div @click="func2($event, 'abc')">func2</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msgs: ['11111', '22222']
},
methods: {
action1: function () {
alert(this.msgs[0])
},
action2: function () {
alert(this.msgs[1])
},
liAction: function (num, msg) {
console.log(num, msg)
},
func1: function (ev) {
console.log(ev)
},
func2: function (ev, msg) {
console.log(ev);
console.log(msg)
}
}
})
</script>
属性指令
<div id="app">
<!-- 属性指令：用vue绑定属性，将属性内容交给vue处理 -->
<!-- 语法：v-bind:属性名="变量" (v-bind: 可以简写为 :) -->
<p class="" style="" v-bind:owen="oo" :jason="jj"></p>
<!-- class 属性 -->
<p :class="c1" @click="action1"></p>
<!-- 多类名 -->
<p :class="[c1, c2]"></p>
<!-- 'br' 固定写死的数据，不再是变量 -->
<p :class="[c1, 'br']"></p>
<!-- style 属性 -->
<!-- 一个变量：该变量值为{},{}内部完成一个个属性的设置 -->
<p class="gDiv" :style="s1">12345</p>
<!-- 一个{}：{}内一个个属性有一个个变量单独控制 -->
<p class="gDiv" :style="{fontSize: fs, color: c}">67890</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
oo: 'Owen',
jj: 'Jason',
c1: 'rDiv',
c2: 'br',
s1: {
// 'font-size': '30px'
fontSize: '30px',
color: 'pink'
},
fs: '20px',
c: 'orange'
},
methods: {
action1: function () {
if (this.c1 == 'rDiv') {
this.c1 = 'gDiv'
} else {
this.c1 = 'rDiv'
}
}
}
})
</script>
条件指令
<meta charset="UTF-8">
<style>
.div {
width: 100px;
height: 100px;
background-color: greenyellow;
border-radius: 50%;
}
</style>
<div id="app">
<!-- 条件指令 v-show | v-if-->
<!-- v-show：消失是以 display: none渲染 -->
<div class="div" v-show="s1"></div>
<div class="div" v-show="s1"></div>
<!-- v-if：消失时不会被渲染渲染，所以建议建立缓存, 用key属性 -->
<div class="div" v-if="s2" key="div1"></div>
<div class="div" v-if="s2" key="div2"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
s1: false,
// s2: false 没写默认为false
}
})
</script>
<meta charset="utf-8">
<style>
ul li {
border: 1px solid black;
width: 60px;
float: left;
}
ul {
list-style: none;
}
ul:after {
content: "";
display: block;
clear: both;
}
.wrap {
width: 500px;
height: 200px;
}
.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
</style>
<div id="app">
<!-- v-if v-else-if v-else 案例 -->
<ul>
<li @click="changeWrap(0)">red</li>
<li @click="changeWrap(1)">green</li>
<li @click="changeWrap(2)">blue</li>
</ul>
<!-- red页面逻辑结构 -->
<div class="wrap red" v-if="tag == 0" key="aaa"></div>
<!-- green页面逻辑结构 -->
<div class="wrap green" v-else-if="tag == 1" key="bbb"></div>
<!-- blue页面逻辑结构 -->
<div class="wrap blue" v-else key="ccc"></div>
<!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 -->
<!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 -->
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
tag: 0,
},
methods: {
changeWrap (num) {
this.tag = num;
}
}
})
</script>
vue one的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
- 关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- 初探Vue
Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...
随机推荐
- Android 绘制中国地图
最近的版本有这样一个需求: 有 3 个要素: 中国地图 高亮省区 中心显示数字 面对这样一个需求,该如何实现呢? 高德地图 因为项目是基于高德地图来做的,所以很自然而然的想到了高德.但是当查阅高德地图 ...
- hexo文章编写部分语法总结以及hexo使用
一.hexo的使用 1.1 新建一篇文章 1 $ hexo new [layout] <title> 1.2. 生成静态文件 1 $ hexo generate 可简写为 1 $ hexo ...
- 图形用户界面(GUI)应用程序开发——菜鸟的第一步
参考资源:贺老师博文 在看完贺老师的博文后,我就照葫芦画瓢的做了个求三角形面积的程序.这是我写的一篇所用时间最长博文(两个多小时,真心挺累,或许是我太笨吧),为了尽可能详细的把步骤写明白我截了二十一张 ...
- 微信小程序采坑之scroll-view
当设置了scroll-y为true之后,纵向是没有问题的,会出现滚动条. Android上一切都是那么的祥和, ios上你会发现如果你scroll-view里面的东西超过横向的宽度时,就会隐藏了. 也 ...
- Python：turtle库的使用及图形绘制
目录 一.绘制一个八边形 二.绘制一个八角图形 三.简述问题 四.循环程序设计 五.绘制一个自己喜欢的图形 一.绘制一个八边形 使用turtle库,绘制一个八边形 代码: from turtle im ...
- 如何优雅地删除 Linux 中的垃圾文件
不知道大家是否也跟我一样,是一只要把的自己电脑文件安排的条理有序,把没用的文件会及时删掉的程序猿呢?如果是的话,那么我们可以愉快地探讨下文章的内容.如果不是的话,你也可以留下来凑凑热闹嘛(>-& ...
- 从输入URL到页面展示
当我们输入 URL 并按回车后,浏览器会对 URL 进行检查,首先判断URL格式,比如是ftp http ed2k等等,我们这里假设这个URL是http://hellocassie.cn,那么浏览器会 ...
- 合并.ts文件 无需软件
cmd 命令直接输入: copy /b D:\temp\*.ts D:\new.ts D盘temp目录的ts文件 合并 并输出到 D盘 new.ts文件
- FCC成都社区·前端周刊 第 1 期
01. 2018 JavaScript 测试概览 文章介绍了JavaScript测试的关键术语.测试类型.工具和方法,并简要分析了工具jsdom.Istanbul.Karma.Chai.Wallaby ...
- SIP 协议详解
SIP 协议详解 2013年参与过一个"视频通讯的App"项目,使用Sip协议通信.当时通信协议这块不是自己负责,加上时间紧.任务重等方面的原因,一直未对Sip协议进行过深入的了解 ...