vue.js学习第一天,了解vue.js
vue.js是一个前端框架,他与jquery不同,jquery是一个js库,而vue.js是js的前端框架。
vue.js对我们前端页面入侵比较大,而jquery则不然。那我们还为什么要使用vue.js呢,vue.js可以让我们不再关注前端的视图层,只要关注前端的业务逻辑即可;vue.js与jquery并不冲突,但vue.js不建议我们再进行手动的或者使用jquery操作dom元素。我们可以使用jquery进行ajax向后台请求数据或者进行动画操作。jquery可以和vue.js进行搭配使用。vue.js可以提高我们的开发效率,提高页面的渲染效率,双向数据绑定;
vue.js是一个mvvm的结构的
我们先来对比一下后端的mvc模式
做过后台的人很多都能理解上面的模式;
而什么是mvvm呢,Model-View-ViewModel
vm是一个调度者,负责将model与view之前的数据进行同步(渲染)
html对应的是view,后期我们使用vue.js创建出来的vm对象(new Vue)就是viewModel,而vm中的data则是model;
下面我们开始第一个demo;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title> </head>
<body>
<div id="paraview">
<!--网速过慢v-cloak有闪烁问题,但他可以插入文本-->
<p v-cloak>pre {{title}} tail</p>
<!-- 没有闪烁问题,前后无法插入文本-->
<p v-text="title"></p>
<!--可以渲染html-->
<p v-html="title"></p>
<input type="button" value="按钮" v-bind:title="buttonStr" />
<p></p>
</div>
</body>
<script type="text/javascript" src="libs/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#paraview',
data: {
title: '<p>parview software</p>',
buttonStr:'this is a button'
}
});
</script>
</html>
怎么样,是不是很容易;
以后的代码都会以这个为模板进行;
v-bind指令可以将属性的值解析为变量
如:<input type="text" v-bind:value="textStr" />
这里的textStr会被解析为变量,既然是变量,就可以写js表达式 如改写为v-bind:value="textStr+'123'"等,v-bind可以省略不写,只保留冒号
在new Vue对象中添加methods对象可以绑定事件;
<input type="button" value="按钮" v-bind:title="buttonStr" v-on:click="btnClick" />
data: {
title: '<p>parview software</p>',
buttonStr:'this is a button'
},
methods: {
btnClick: function () {
alert('点击了');
}
}
v-on:可以简写为@,即@click="btnClick"
v-model是唯一的数据双向绑定指令;
<input type="text" v-bind:value="buttonStr" />
<input type="text" v-model="buttonStr" />
v-bind只能做到数据的单向绑定,而v-model才能做到双向绑定;
v-for可以做循环;
listData:['test1','test2','test3','test4'];
<p v-for='(item,i) in listData'>{{item}}</p>
上面的listData数组里面保存对象仍然是可以解析的,大家可以自行尝试;
同样可以循环对象;
person:{
name:'张飞',
age:56
}
<p v-for='(value,key) in person'>{{value}}------{{key}}</p>
<p v-for='i in 10'>{{i}}</p>
所有的指令中的代码都是解析执行的,所以,例如上面的v-for里面可以执行一个方动态查询出一个集合进行遍历;
如:<p v-for='item in search()'>{{item}}</p>
上面的代码是可行的;
vue.js学习第一天,了解vue.js的更多相关文章
- Vue学习第一天:Vue.js指令系统
1. 如何使用Vue.js? 1.1 直接引入 - <script src="./statics/vue.min.js"></script> - 引入之后在 ...
- Vue入门学习总结一:Vue定义
Vue的功能是为视图提供响应的数据绑定及视图组件,Vue是数据驱动式的,不直接修改DOM而是直接操作数据实现对界面进行修改. 首先我们需要在script中定义一个Vue实例,定义方法如下: var v ...
- node.js学习(二)--Node.js控制台(REPL)&&Node.js的基础和语法
1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...
- vue.js学习第一节
<div id="app" class="app"> <p>{{ message }}</p> <p>{{ in ...
- Vue.js 学习笔记之四:Vue 组件基础
到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...
- Vue语法学习第一课——插值
学习关于Vue的插值语法 ① 文本值 : "Mustache"语法,即双大括号 <span>Message:{{msg}}</span> 注:双大括号中的m ...
- Three.Js学习第一天
因为工作需求,最近接触到了ThreeJs库,国内学习文档的确少,所以在这里写下bolgs记录学习史,并且给后面学习的人尽一份微博之力. 3D场景依靠WebGL技术.目前支持比较好的浏览器,谷歌.火狐. ...
- JS学习第一课
1.js 按照编写顺序执行 2.输出使用document.write. 3.申明数组 var array = [1,2,3,5] ; var arrStr = ["sgsg",& ...
- JS学习第一天
JS的三种引入方式: 内联:在标签属性中引入javascript:js代码 <a href="javascript:("helloworld")"& ...
随机推荐
- java ee 思维导图
http://download.csdn.net/download/g290095142/10149996 这是原地址,我觉得很棒,就下载下来用xmind看了看,发现很全面的.
- xcode10关于clang -lstdc++.6.0.9报错问题
因为xcode10已经废弃了libstdc++.6.0.9这个库,所以只需要在你的工程中删除这个库,然后添加libc++这个库就可以了.别的没什么,如果xcode10报错mutable开头的,大部分是 ...
- 如何使用桥接模式使虚拟机VMware中的Redhat能上网
VMware中有三种网络连接方式可使其上网:桥接模式,NAT模式,host-only模式,下面详细介绍如何使用桥接模式使虚拟机中的Redhat连上互联网. Bridge(桥接)模式 在Bridge模式 ...
- 声明一个set集合,使用HashSet类,来保存十个字符串信息,然后通过这个集合,然后使用iterator()方法,得到一个迭代器,遍历所有的集合中所有的字符串;然后拿出所有的字符串拼接到一个StringBuffer对象中,然后输出它的长度和具体内容; 验证集合的remove()、size()、contains()、isEmpty()等
package com.lanxi.demo1_3; import java.util.HashSet; import java.util.Iterator; import java.util.Set ...
- python3.6 连接mysql数据库问题
最近有个项目欲安装MySQL-python/1.2.5一直失败. 环境: win7 python3.6.2 报错信息如下: Creating library build\temp.win32-3.6\ ...
- win10下运行cmd闪退时检查方法
在cmd下运行 exe加空格加斜杠加问号
- JS的作用域链与原型链
来一波,好记性不如烂笔头. 这两条链子可是很重要的. 作用域链 当执行一段JS代码(全局代码或函数)时,JS引擎会创建为其创建一个作用域又称为执行上下文(Execution Context),在页面加 ...
- Java面试题集锦(持续更新)
1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: -抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪些属性和行为,并不关注这 ...
- console.log()中的%d,%s等代表的输出类型
在console.log()或console.debug()中输出时会有%d,%s等符号. %s for a String value 字符类型 %d or %i for a Integer valu ...
- mysql导出导入数据无权限
问题:The MySQL server is running with the --secure-file-priv option so it cannot execute this statemen ...