整理自官网教程 -- https://cn.vuejs.org/

1. 在HTML文件底部引入Vue  

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. 基础HTML标签和属性

<div id="app">
<!--v-bind:title 可缩写为 :title -->
<!--添加v-once属性时,能执行一次性地插值 -->
<!-- v-html="xx"可插入HTML代码 -->
<span v-bind:title="info">
<!-- 支持JS单个表达式,不能访问用户定义的全局变量 -->
{{ message }}  
</span> 
<!--v-on:click 可缩写为 @click -->
<button v-on:click="reverseMessage">逆转消息</button>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p v-if="seen">切换元素显示</p>
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
  <!-- v-model实现表单输入和后台状态之间的双向绑定 -->
  <input v-model="message">
</div>

3. 基础JS属性

var app = new Vue({
el:'#app',
data:{ //预设在data内的属性才是响应式的
  message:'Hello Vue!',
  info:'Show title.',
  seen:true,
  todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
],
  question: '',
  answer: 'I cannot give you an answer until you ask a question!'
},
  methods: { //Vue实例内方法函数
  reverseMessage: function () {
  this.message = this.message.split('').reverse().join('')
  }
},
  computed: { //计算属性,基于其依赖进行缓存,依赖变化时才重新求值
    reversedMessage: function() {   //默认方法为reversedMessage的getter(),也可设置setter()方法
    return this.message.split('').reverse().join('')
  }
 },
  watch: { //侦听属性,适合在数据变化时需要执行异步或开销较大时
    // 如果 `question` 发生改变,这个函数就会运行
   question: function (newQuestion, oldQuestion) {
  this.answer = 'Waiting for you to stop typing...'
      //调用其它处理答案的方法
 }
 },
  created: function () { //vue实例中生命周期钩子函数之一
    console.log('tips is:' + this.tips)
  }
})

4. 备注

  a. Vue实例中带有前缀$的属性和方法可将其与用户定义的分开,如$data,$watch等。

  b. 利用freeze()函数可阻止修改现有data,用法如下:    

var obj = {
foo: 'bar'
}
Object.freeze(obj);
//...
//vue实例中设置
//...
data: {
obj
}

Vue.js学习笔记--1.基础HTML和JS属性的使用的更多相关文章

  1. Node.js 学习笔记(一)--------- Node.js的认识和Linux部署

    Node.js 一.Node.js 简介  简单的说 Node.js 就是运行在服务端的可以解析并运行 JavaScript 脚本的软件. Node.js 是一个基于Chrome JavaScript ...

  2. Vue.js学习笔记--2.基础v-指令

    整理自官网教程 -- https://cn.vuejs.org/ 1. v-bind绑定Class与Style a. 绑定Class 语法:v-bind:class="{classname: ...

  3. JS学习笔记1_基础与常识

    1.六种数据类型 5种基础的:Undefined,Null,Boolean,Number,String(其中Undefined派生自Null) 1种复杂的:Object(本质是一组无序键值对) 2.字 ...

  4. Vue.js学习笔记 第六篇 内置属性

    computed属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  5. JS学习笔记:(三)JS执行机制

    首先我们先明确一点:JavaScript是一门单线程语言.单线程也就是说同一时间只能执行一个任务,所有的任务都必须排队顺序执行.那么如果一个任务耗时很长,阻塞了其它任务的执行,就会给用户造成不友好的体 ...

  6. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  7. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  8. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  9. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

随机推荐

  1. .NET中lock的使用方法及注意事项[转]

    标准-->ms官方: http://msdn.microsoft.com/zh-cn/library/c5kehkcz(v=vs.90).aspx A.为什么不要 "lock(this ...

  2. 记一次Tomcat无法正常启动的查错与解决之路

    使用LombozEclipse运行某Web应用,结果总是404. 换另一个Eclipse运行,还是404. 换Tomcat到更高版本,还是404. 直接启动Tomcat,闪退. 用重定向拦截输出,可惜 ...

  3. 嵌入式开发之davinci---dm8127 ipipe

    http://blog.csdn.net/dog0138/article/details/4212576 http://e2e.ti.com/support/dsp/davinci_digital_m ...

  4. NYOJ1026 阶乘末尾非0 【模板】

    阶乘末尾非0 时间限制:2000 ms  |  内存限制:65535 KB 难度:3 描写叙述 我们的问题非常是简单.n! 末尾非0数是几? 比方n=5的时候,n! =120,那么n!末尾非0数是2. ...

  5. accept()函数用来告诉Qt,事件处理函数“接收”了这个事件,不要再传递;ignore()函数则告诉Qt,事件处理函数“忽略”了这个事件,需要继续传递(看一下QWidget::mousePressEvent的实现,最为典型。如果希望忽略事件,只要调用父类的响应函数即可)

    QEvent的accept()和ignore()一般不会用到,因为不如直接调用QWidget类的事件处理函数直接,而且作用是一样的,见下面的例子. 推荐直接调用QWidget的事件处理函数.而不是调用 ...

  6. 总结文件操作函数(二)-C语言

    格式化读写: #include <stdio.h> int printf(const char *format, ...);                   //相当于fprintf( ...

  7. bzoj 4521 电话号码

    题目大意: 求$[L,R]$中,满足不同时存在4和8且有连续三个一样的个数 思路: 我为什么要记忆化搜索里带-1啊 我可真是个** 直接记忆化搜索记前两位是否有4,8以及是否满足连续 #include ...

  8. 通过minicom传送文件的相关配置及使用方法

    写一下我使用串口向开发板传送文件中遇到的问题及解决办法: 使用的软硬件环境: 虚拟机:VMware® Workstation 8.0.1 Linux操作系统:Fedora 9 开发板:mini6410 ...

  9. bzoj 3714 [ PA 2014 ] Kuglarz —— 思路+最小生成树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3714 因为每个杯子下最多一个小球,所以从奇偶性就可以看出有没有球: 询问一段区间,等于知道一 ...

  10. zoj 3861(dfs)

    Valid Pattern Lock Time Limit: 2 Seconds      Memory Limit: 65536 KB Pattern lock security is genera ...