偏前端-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的使用:
随机推荐
- JS Error 内置异常类型 处理异常 Throw语句
Exceptional Exception Handling in JavaScript MDN资料 Anything that can go wrong, will go wrong. ...
- flask框架下的jinja2模板引擎(2)(过滤器与自定义过滤器)
flask框架下的jinja2模块引擎(1):https://www.cnblogs.com/chichung/p/9774556.html 这篇论文主要用来记录下 jinja2 的过滤器. 什么是过 ...
- appium定位安装包启动类名称
cmd输入:adb logcat > d:/1.txt 然后运行APP,关闭APP,到D盘查找文件1,Ctrl+F,输入LAUNCHER,定位启动类,如下图所示位置 即为,eclipse调用A ...
- html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
(1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...
- sql 2000 无法连接远程数据库 sqlserver不存在或访问被拒绝、不能打开到主机的连接，在端口1433：连接失败等 解决方案
问题: sql 2000 无法连接远程数据库 sqlserver不存在或访问被拒绝 telnet 127.0.0.1 1433 提示:不能打开到主机的连接,在端口1433:连接失败 解决方案: ...
- Docker相关连接
docker-compose文档:https://docs.docker.com/compose/compose-file/ dockerfile文档:https://docs.docker.com/ ...
- PetaPoco轻量级ORM框架 - 入门安装
PetaPoco 是一个开源轻量级ORM,够小,够快,单文件 在GitHub上有很高的人气 1377星,几年来作者一直在更新 当前版本6.0.317 - Netstandard 2.0(同时支持.ne ...
- 虚拟机下的CentOS无法上网的解决办法
1.首先保证虚拟机的网络适配器为NAT模式 2.设置虚拟机的“编辑”-->“虚拟网络编辑器”中的VMnet8的DHCP的设置两个选项都勾选上. 3.设置物理主机,保证虚拟网关的IP地址为自动获取 ...
- meta标签的使用（转）
1.Expires(期限) 说明:可以用于设定网页的到期时间.一旦网页过期,必须到服务器上重新传输. 用法: <meta http-equiv="expires" conte ...
- Mac Sublime Text 3
安装Package Control安装过程: 使用快捷键 control + ` 或者菜单栏选择View > Show Console安装Package Control参考官方页面.Sublim ...