偏前端-vue.js学习之路初级（一）概念
首先--不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。
新建一个html,引入一下js:
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 一、文本申明式渲染
html:
1 <div id="app">
{{ message }}
</div>
js:
1 var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
el：
简单的理解为 选中 id 为 app 的div，（提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。）
data:
文档一：1.类型可以是 object 或者 function
2.组件的定义只接受 function
分析一：首先，data的类型可以是Object
new Vue({
el:'app',
data:{
newTodoText:'',
visitCount:0,
zhen:false,
todos:[],
error:null
}
})
分析二：组件（component）里的定义的data必须是方法类型
Vue.component('myComponent',{
props:[],
data:function(){
return{
newTodoText:'',
visitCount:0,
zhen:false,
todos:[],
error:null
}
}
})
文档二：Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。
一旦观察过，不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。
分析二：在上图的实例中，app的data对象中有五个属性，分别是：
newTodoText:'',
visitCount:0,
zhen:false,
todos:[],
error:null
分析二：Vue会把这五个属性转化为getter和setter来控制访问对象app的属性，以第一个属性newTodoText为例设置了getter和setter：
const Vue = {
_newTodoText:'',
/***************/
get newTodoText(){
return this._newTodoText;
},
set newTodoText(value){
this._newTodoText = value;
},
/****************/
}
文档三：实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。
以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。
分析三：这个好理解，就是你可以在data中可以定义属性时在属性名开头加上下划线“_”或者美元符号“$”，就不可以直接访问，
<body>
<div id="app">
{{first}}
{{_first}}
</div>
<script>
new Vue({
el:'app',
data:{
first:'ok',
_first:'nope',
}
})
//这里会报错，下面才是正解
分析三：
//这里才是正确姿势！！
<body>
<div id="app">
{{first}}
{{$data._first}}
</div>
<script>
new Vue({
el:'app',
data:{
first:'ok',
_first:'nope',
}
})
文档四：当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函 数，从而返回初始数据的一个全新副本数据对象。
如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。
分析四：这就是分析一要解决的问题了，为什么组件（component）里的定义的data必须是方法类型，原因就是在此，在工程中，每个组件都有可能用来被创建多个实例，而这个组件的实例他们的属性是不能共用的！意思是组件A的属性改变不能引起组件B的同一属性改变，结合原型链知识很容易就能想清楚
除了文本插值，我们还可以像这样来绑定元素特性：v-bind 特性被称为指令。指令带有前缀 v-
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
二、条件与循环
1.条件判断使用 v-if 指令：可以用 v-else 指令给 v-if 添加一个 "else" 块：
//随机生成一个数字，判断是否大于0.5，然后输出对应信息：
<div id="app">
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
</div> <script>
new Vue({
el: '#app'
})
</script>
2.v-else-if
v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
3.v-show
v-show 指令来根据条件展示元素：
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div> <script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
4.v-if与v-show的区别：
在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。
v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
5.循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组，并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div> <script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
模板中使用 v-for：根据sites数组内容循环展示模板里的 li 标签
<ul> <template v-for="site in sites"> <li>{{ site.name }}</li> <li>--------------</li> </template> </ul>
5.1 v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据：
<li v-for="value in object"> {{ value }} </li>
也可以提供第二个的参数为键名：
<li v-for="(value, key) in object"> {{ key }} : {{ value }} </li>
第三个参数为索引：
<li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li>
不仅如此，在迭代属性输出的之前，v-for会对属性进行升序排序输出：
<div id="app">
<ul>
<li v-for="n in object">
{{ n }}
</li>
</ul>
</div> new Vue({
el: '#app',
data: {
object: {
2: '第三',
0: '第一',
1: '第二'
}
}
})
5.2 v-for 迭代整数
v-for 也可以循环整数
<li v-for="n in 10"> {{ n }} </li> //从1展示到10
5.3 v-for 循环数组
<li v-for="n in [1,3,5]"> {{ n }} </li> //展示1/3/5
三、处理用户输入
1.v-on指令绑定事件监听
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
2.v-model（它能轻松实现表单输入和应用状态之间的双向绑定。）
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
四、组件化应用构建
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用.
组件化构建，需要理解的还是比较多的，这里单独写一篇方便学习 vue.js 组件化构建
偏前端-vue.js学习之路初级（一）概念的更多相关文章
- 偏前端-vue.js学习之路初级（二）组件化构建
vue.js 组件化构建 组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...
- 前端——Vue.js学习总结一
一.什么是Vue.js 1.Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架 2.Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端 ...
- Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- Web前端-Vue.js必备框架（四）
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- Web前端-Vue.js必备框架（三）
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
- Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
- Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- web前端全栈学习之路
web前端全栈学习之路 --- 陆续更新中 一.HTML相关 1.HTML常用标签:http://www.cnblogs.com/wyb666/p/8733699.html 2.HTML5基础: 3. ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
随机推荐
- 一、ionic 图片轮播问题
使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题:图片加载不出来和图片轮播至最后一个不轮播的问题 1.如何解决图片加载不出来的问题 i ...
- dbcp2、c3p0、druid连接池的简单配置
引入Maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...
- Taro 是一套遵
https://github.com/NervJS/taro 使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序.H5.React-Nat ...
- springboot整合fastdfs实现上传和下载
FastDFS_Client源码 https://github.com/tobato/FastDFS_Client 友情提示:由于FastDFS_Client这个源码不是很多,并且目前没有找到相关文档 ...
- xcopy-参数详解
XCOPY——目录复制命令 1．功能:复制指定的目录和目录下的所有文件连同目录结构. 2．类型:外部命令 3．格式:XCOPY [源盘:]〈源路径名〉[目标盘符:][目标路径名][/S][/V][/E ...
- Asp.Net MVC4 系列-- 进阶篇之路由
原文 http://blog.csdn.net/lan_liang/article/details/22993839 创建一个路由 打开 RouteConfig.cs ,发现已经创建了一个默认路由 ...
- 在 Windows 容器中使用 gMSA
前不久给公司搭测试环境,其中涉及到了某组件在容器中使用 kerberos 身份验证连接 SQL Server 数据库的问题. Windows 容器本身并不能加入域,但可以通过 gMSA 运行容器使容器 ...
- 乘风破浪：LeetCode真题_012_Integer to Roman
乘风破浪:LeetCode真题_012_Integer to Roman 一.前言 经过了前面的思维训练,我们在某些方面有了一定的提高,但是对于实际的问题,要在短时间内得到答案,还是需要我们多多的练习 ...
- arc093F Dark Horse
我们可以假设1的位置在1,并且依次与右边的区间合并.答案最后乘上2^n即可. 那么需要考虑1所在的区间与另一个区间合并时,另一个区间的最小值不能为特殊的. 直接求解很难,考虑容斥,钦定在哪几个位置必定 ...
- 四级菜单实现（Python）
menu_dict = { '山东' : { '青岛' : { '四方':{'兴隆路','平安路','杭州路'}, '黄岛':{}, '崂山':{} }, '济南' : { '历城':{}, '槐荫' ...