偏前端-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的使用:
随机推荐
- C#中的特殊数据类型
一.c#中的特殊数据类型 C#中特殊数据类型有class类型.结构类型.数组类型.枚举类型.集合类型.委托类型.事件.Lambda表达式.接口类型. 1.class类型 1.1类定义 class St ...
- golang 获取变量类型的字符串格式 列举变量类型
fmt.Println(reflect.TypeOf(var)) switch xxx.(type){ case int:.... case float32:... case float64:... ...
- 小米OJ 有多少个等差数列
题目链接 https://code.mi.com/problem/list/view?id=20 代码 #include <bits/stdc++.h> using namespace s ...
- VS无法加载Web项目
在VS中修改Web项目的服务器设置时无法加载改Web项目,提示如下图 原因:因为项目中的EbcBuy.Bll.Users.WebApi.csproj.user文件并没有加入到版本控制文件,所以讲项目还 ...
- windows下的FTP命令
假设要连接的FTP信息如下: FTP Server: FtpTest User: tester Password: 123123 打开Windows的开始菜单,执行"运行"命令,在 ...
- python基础语法2
一.顺序结构 顺序结构就是从上而下的一步一步的执行每行程序语句. 二.分支结构(if) 形式1: if 条件: pass 形式2: if 条件: pass else: pass 形式3: if 条件: ...
- [EffectiveC++]item04:Make sure the objects are initialized before they're used
28 页 C++规定,对象的成员变量的初始化动作发生在进入构造函数本体之前. 构造函数的一个较佳的写法是,使用所谓的member initialization list替换赋值动作. 29页 但请立下 ...
- HttpClient简述
HttpClient相比传统JDK自带的URLConnection,增加了易用性和灵活性,它不仅是客户端发送Http请求变得容易,而且也方便了开发人员测试接口(基于Http协议的),即提高了开发的效率 ...
- js判断鼠标滚轴方向（向上或向下）
var num=1; $(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.origi ...
- Java并发案例05---Master-Worker模式
Master-Worker 模式是常用的并行计算模式.它的核心思想是系统由两类进程协同工作,Master和Worker进程.Master负责接收和分配任务,Worker负责处理子任务.当各个Worke ...