一:Vue 语法格式:

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

二:Vue 实例:

<div id="app">
<p>{{message}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
{message}
},
methods: {
details: function() {
''
}
}
})
</script>

三:Vue 选项(el  data  methods):

1.  el 

  ☞ 作用:指定管理的视图区域

  ☞ 指定方式:通过选择器或者 DOM 对象

  注意:不能指定<body>和<html> 标签作为视图,因为<script>包含在<body>和<html> 标签中

2.  data

  ☞  作用:指定 vm 中的响应数据

  ☞  注意:数据的使用需要提前声明

3.  methods

  ☞  作用:定义函数,提供给 vm 实例去使用

  ☞  注意:fn ( ) { } 是推荐写法,等同于普通函数 function  fn ( ) { }

    不推荐使用箭头函数,因为箭头函数中没有 this ,可以理解为它的上一级,也就是说 this 的指向取决于定义它的位置

  ☞  函数中的 this 就是 vm 实例

四:Vue 相关术语---模板语法:

1. 插值表达式:

  

2. 属性:

3. 表达式:

4. 指令:

5. 参数:

6. 修饰符

7. 用户输入:

8. 过滤器:

9. 缩写:

Vue 知识整理—02-起步的更多相关文章

  1. Vue 知识整理—01-基础

    一:Vue是什么? Vue是一个JS框架. Vue.js是一套构建用户界面的渐进式框架. 库和框架的区别: ☞库:提供一些 API 工具函数,体现了封装的思想,需要我们主动调用: ☞框架:提供一套完整 ...

  2. Vue知识整理15:组件注册

    采用局部注册组件: 将代码放在vue的一个实例中,而不是单列申明.

  3. Vue知识整理14:组件基础

    组件:可以复用的实例.使用 v-component来实现 2.通过props属性添加相应的属性,并且在模板中渲染 当模板中包含多个组件时,则需要用一个div来包裹起来.如下: 可以将原来的的点击事件, ...

  4. Vue知识整理10:条件渲染(v-if v-show)

    在Vue中使用v-if等条件实现条件的判断来实现对象的显示. 也可以采用 v-show条件来实现对象的显示.

  5. Vue知识整理7:vue中函数的应用

    在vue中使用函数对字符串做相应的处理: split:分割字符,将每个字符分割为一个数组值: reverse:将字符进行逆序排序: join:将字符连接: 最终输出结果.

  6. Vue知识整理6:JavaScript表达式

    可在vue中运用js表达式,完成数据的运算(包括三元运算).比较等操作.

  7. Vue知识整理2:Vue生命周期方法

    在vue执行过程中,可以分为beforeCreate.created.BeforeMount.mounted  .BeforeUpdate.updated 等常用的方法,如下图所示. 除此之外,通过查 ...

  8. Vue知识整理1:$watch方法的使用

    如下图所示:vue中,可以使用$watch方法显示变量的前面值和当前值,方便进行判断.使用方法: vm.$watch('a',function(newval,oldval){ ...... })

  9. Vue知识整理16:单文件组件

    过程较为复杂,这里直接写出视频地址,可以直接查看 https://learning.dcloud.io/#/?vid=14

随机推荐

  1. 全局路径规划算法Dijkstra(迪杰斯特拉算法)- matlab

    参考博客链接:https://www.cnblogs.com/kex1n/p/4178782.html Dijkstra是常用的全局路径规划算法,其本质上是一个最短路径寻优算法.算法的详细介绍参考上述 ...

  2. Requests卡死问题

    https://www.cnblogs.com/niansi/p/7143736.html https://blog.csdn.net/pilipala6868/article/details/807 ...

  3. eclipse发布到tomcat

    1.用maven集成的工程,在发布的时候,发现其中的变量没有改变,类似${}不存在之类 解决方式:这个类问题是由于缓存导致,基本方法就是clean一下,重启eclipse,最后不行重启电脑 2.今天遇 ...

  4. connect设置连接超时

    转自:庖丁解牛 /** * connect_timeout - 带超时的connect(方法中已执行connect) * @fd:文件描述符 * @addr:地址结构体指针 * @wait_secon ...

  5. nginx + keepalived 主从模式

    转自:https://www.cnblogs.com/kevingrace/p/6138185.html 负载均衡技术对于一个网站尤其是大型网站的web服务器集群来说是至关重要的!做好负载均衡架构,可 ...

  6. Eclipse插件:Spket

    1,破解文件32bit不适用 java -jar spket-1.6.18.jar:

  7. JZ2440学习笔记之链接文件lds

    如果在Linux环境下用arm-linux-gcc来编译arm程序,需要编写链接文件lds: 1. 运行地址=链接地址,表示代码在SDRAM中执行的地址,如果程序中有对某部分代码执行过搬运,需要在ld ...

  8. php高精度计算问题

    从事金融行业,资金运算频繁,这里说下我遇到的坑....稍不留神,用户资金可能损失几十万,甚至更可怕......直接上实例吧: javascript 0.1 + 0.2 为啥不等于 0.3 ? (正确结 ...

  9. iOS日历控件

    项目需要,前一阵子重构了下iPad工程,添加了一个滚动无缝日历. 当时没有头绪,网上找了一个源码改吧改吧就上线了(参考链接),这个功能很多而且流畅性也特别好,推荐不会写的可以参考下. 这几天,活不太忙 ...

  10. Windows环境下最新OpenCV和Contribute代码的联合编译【20180926更新红字】

    解决这个问题,目的在于获得并使用最新的完全版本的代码,主要方法是对CMake能够熟练使用,并且对编译等基础支持有所了解. 因为这篇博客经过多次修改,所以里面的内容和配图可能有不是完全比对的地方,但是只 ...