1.新建一个html文件导入vue.js

<script src="node_modules/vue/dist/vue.js"></script>

2.创建Vue实例

  1>每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:

var vm = new Vue({
// 选项
})

  2>在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括:

      el,data,methods

3.模板或元素 

  1>每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染。

  我们可以通过el属性来指定。

例如一段html模板:

<div id="app">

</div> 

然后创建Vue实例,关联这个div

var vm = new Vue({
el:"#app"
})

这样,Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

4.数据

  1>当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染,并且监视data中的属性变化,当data发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。

html:

双向绑定:

我们可以观察到,输入框的变化引起了data中的num的变化,同时页面输出也跟着变化。

  • input与num绑定,input的value值变化,影响到了data中的num值

  • 页面{{num}}与数据num绑定,因此num值变化,引起了页面效果变化。

没有任何dom操作,这就是双向绑定的魅力。

<div id="app">
<input type="text" v-model="num">
<!---->
<button @click="num++">+</button>
<h1>
我是{{name}}<br>
吃了{{num}}个人
</h1>
</div>
js:
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",//element
data: {
name: "大老虎",
num: 1,
}
});
</script>
 
  • name的变化会影响到input的值

  • input中输入的值,也会导致vm中的name发生改变

TZ_16_Vue_入门案例的更多相关文章

  1. SpringMVC入门案例及请求流程图(关于处理器或视图解析器或处理器映射器等的初步配置)

    SpringMVC简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 Spring结构图 Spr ...

  2. SpringMvc核心流程以及入门案例的搭建

    1.什么是SpringMvc Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能 M ...

  3. Struts2第一个入门案例

      一.如何获取Struts2,以及Struts2资源包的目录结构的了解    Struts的官方地址为http://struts.apache.org 在他的主页当中,我们可以通过左侧的Apache ...

  4. MyBatis入门案例、增删改查

    一.MyBatis入门案例: ①:引入jar包 ②:创建实体类 Dept,并进行封装 ③ 在Src下创建大配置mybatis-config.xml <?xml version="1.0 ...

  5. Hibernate入门案例及增删改查

    一.Hibernate入门案例剖析: ①创建实体类Student 并重写toString方法 public class Student { private Integer sid; private I ...

  6. Quartz应用实践入门案例二(基于java工程)

    在web应用程序中添加定时任务,Quartz的简单介绍可以参看博文<Quartz应用实践入门案例一(基于Web应用)> .其实一旦学会了如何应用开源框架就应该很容易将这中框架应用与自己的任 ...

  7. Quartz应用实践入门案例一(基于Web环境)

    Quartz是一个完全由java编写的开源作业调度框架,正是因为这个框架整合了许多额外的功能,所以在使用上就显得相当容易.只是需要简单的配置一下就能轻松的使用任务调度了.在Quartz中,真正执行的j ...

  8. MyBatis入门案例 增删改查

    一.MyBatis入门案例: ①:引入jar包 ②:创建实体类 Dept,并进行封装 ③ 在Src下创建大配置mybatis-config.xml <?xml version="1.0 ...

  9. Hibernate入门案例 增删改

    一.Hibernate入门案例剖析: ①创建实体类Student 并重写toString方法 public class Student { private Integer sid; private I ...

随机推荐

  1. php断点续传之文件上传与文件下载

    下载: 原理: Http头的 Range.Content-Range()未启用单点登录GerenalRequest URL: http://www.demotest.com/php/fileDownl ...

  2. 【2011集训贾志鹏】Crash 的数字表格

    题面 题目分析 (默认\(n<m\)) 题目要求\(\sum\limits_{i=1}^n\sum\limits_{j=1}^mlcm(i,j)\). 由\(lcm(i,j)=\frac{i\c ...

  3. [转]成为Java顶尖程序员 ,看这11本书就够了

    “学习的最好途径就是看书“,这是我自己学习并且小有了一定的积累之后的第一体会.个人认为看书有两点好处: 1.能出版出来的书一定是经过反复的思考.雕琢和审核的,因此从专业性的角度来说,一本好书的价值远超 ...

  4. CodeForces-510D

    https://vjudge.net/problem/CodeForces-510D题目可以转化为花最小代价选一些数,然后这些数可以经过加减运算得到1或-1,不然1你就凑不出来,一旦凑出来1,其他的都 ...

  5. mysql主从跳过错误

    mysql主从复制,经常会遇到错误而导致slave端复制中断,这个时候一般就需要人工干预,跳过错误才能继续 跳过错误有两种方式: 1.跳过指定数量的事务 mysql>stop slave;  m ...

  6. 时间复杂度 - Convert 计算次数 TO 时间复杂度

    我们假设计算机运行一行基础代码需要执行一次运算. int aFunc(void) { printf("Hello, World!\n"); // 需要执行 1 次 return 0 ...

  7. 不同版本springboot上传文件大小设置

    参考原文:https://blog.csdn.net/awmw74520/article/details/70230591 Spring Boot 1.3.x或者之前 multipart.maxFil ...

  8. Mkdir- Linux必学的60个命令

    1.作用 mkdir命令的作用是建立名称为dirname的子目录,与MS DOS下的md命令类似,它的使用权限是所有用户. 2.格式 mkdir [options] 目录名 3.[options]主要 ...

  9. 在 Angularjs 中$state.go 如何传递参数

    在目标页面规定接受的参数: .state('app.AttendanceEditFixed', { url: '/AttendanceEditFixed', params: {'id': null,' ...

  10. 19-10-17-T

    真的T了.(滑稽 Final 35 Miemeng 100 03:12:51 0 03:12:54 15 03:12:55 115 03:12:55 幸好$T1$还能要,不然就…… 前言 中午$\sc ...