偏前端-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的使用:
随机推荐
- jquery 之 $().each和$.each()
一.选择器+遍历(dom操作)分为两种: 第一种: $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); <!DOCTYPE ht ...
- postman具体讲解
postman 简单教程-实现简单的接口测试 最近开始做接口测试了,因为公司电脑刚好有postman,于是就用postman来做接口测试,哈哈哈哈,...postman 功能蛮强大的,还比较好用,下面 ...
- 算法之冒泡排序(Java语言)
冒泡排序(英语:Bubble Sort) 是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也就是说 ...
- PreApplicationStartMethod特性说明
PreApplicationStartMethod主要用于为程序集指定一个方法,在程序集加载时进行一些自定义的初始化处理. 使用方式如下所示,首先在程序集中定义一个公共类型和一个公共静态的方法 然后我 ...
- Linux常用基本命令大全
1 一般情况下,自己安装linux系统都会选择简易版,这里面少很多命令,所以需要安装其他的包 yum install openssh-clients 安装scp的软件包 2 把当前一 ...
- oracle中RAW数据类型
近日在研究v$latch视图时,发现一个从未见过的数据类型.v$latch 中ADDR属性的数据类型为RAW(4|8) 同时也发现v$process中的ADDR属性的数据类型也为RAW(4|8).于 ...
- August 12th 2017 Week 32nd Saturday
That which does not kill us makes us stronger. 但凡不能杀死你的,最终都会使你更强大. Seemingly I have heard this from ...
- December 07th 2016 Week 50th Wednesday
Life is a flower, and love is the honey of the flower. 人生是花儿,而爱情就是花的蜜. My life is not as beautiful a ...
- Python文件基础操作(IO入门1)
转载请标明出处: http://www.cnblogs.com/why168888/p/6422270.html 本文出自:[Edwin博客园] Python文件基础操作(IO入门1) 1. pyth ...
- PhoneGap的通知
一.通知类型列表 1.notification.alert 提示警告框 2.notification.confirm 确认对话框 3.notifica ...