1.实例:

  1. var vm = new Vue({
  2. el: '#example',
  3. data: {
  4. a:1
  5. },
  6. created: function () {
  7. // `this` 指向 vm 实例
  8. console.log('a is: ' + this.a)
  9. }
  10. })
  11. vm.a === data.a // -> true
  12. vm.$data === data // -> true
  13. vm.$el === document.getElementById('example') // -> true
  14. // $watch 是一个实例方法
  15. vm.$watch('a', function (newVal, oldVal) {
  16. // 这个回调将在 `vm.a` 改变后调用
  17. })

2.数据绑定:

1)文本

  1. <span>Message: {{ msg }}</span> //加载时会出现{{}},不推荐
  2.  
  3.   <div>{{{ raw_html }}}</div> //raw_html是html时
  4.  
  5.   <p v-html="msg"></p>
  6.  
  7.   <p v-text="msg"></p>
  8.  
  9.   <span v-once>这个将不会改变: {{ msg }}</span>

2)指令

  1. <button v-bind:disabled="isButtonDisabled">Button</button>
  2. <p v-if="seen">现在你看到我了</p>
  3. <a v-bind:href="url">...</a> <a :href="url">...</a>//缩写
  4. <a v-on:click="doSomething">...</a> <a @click="doSomething">...</a> //缩写
  5. <form v-on:submit.prevent="onSubmit">...</form>

3.方法:

computed

  1. <div id="example">
  2. <p>Original message: "{{ message }}"</p>
  3. <p>Computed reversed message: "{{ reversedMessage }}"</p>
  4. </div>
  5. var vm = new Vue({
  6. el: '#example',
  7. data: {
  8. message: 'Hello'
  9. },
  10. computed: {
  11. // 计算属性的 getter
  12. reversedMessage: function () {
  13. // `this` 指向 vm 实例
  14. return this.message.split('').reverse().join('')
  15. }
  16. }
  17. })

结果:

Original message: "Hello"

Computed reversed message: "olleH"

vm.reversedMessage 的值始终取决于 vm.message 的值,当 vm.message 发生改变时,所有依赖 vm.reversedMessage 的绑定也会更新。

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

和watch区别:https://blog.csdn.net/smartdt/article/details/75557369

4.动态绑定class

  1. <div v-bind:class="{ active: isActive }"></div>
  2. <div class="static"
  3. v-bind:class="{ active: isActive, 'text-danger': hasError }">
  4. </div>
  5.  
  6. <div v-bind:class="classObject"></div>
  7. data: {
  8. classObject: {
  9. active: true,
  10. 'text-danger': false
  11. }
  12. }
  13.  
  14. <div v-bind:class="[activeClass, errorClass]"></div>
  15. data: {
  16. activeClass: 'active',
  17. errorClass: 'text-danger'
  18. }
  19.  
  20. <div v-bind:style="styleObject"></div>
  21. data: {
  22. styleObject: {
  23. color: 'red',
  24. fontSize: '13px'
  25. }
  26. }
  27.  
  28. <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

5.条件语句和循环语句

  1. v-if
    <div v-if="Math.random() > 0.5">
  2. Now you see me
  3. </div>
  4. <div v-else>
  5. Now you don't
  6. </div>
  7. v-if v-else-if
  8. <div v-if="type === 'A'">
  9. A
  10. </div>
  11. <div v-else-if="type === 'B'">
  12. B
  13. </div>
  14. <div v-else-if="type === 'C'">
  15. C
  16. </div>
  17. <div v-else>
  18. Not A/B/C
  19. </div>
  20. v-for:
    列表:
  1. <ul id="example-2">
    <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
    </ul>
  2.  
  3. var example2 = new Vue({
  1. el: '#example-2',
    data: {
    parentMessage: 'Parent',
    items: [
    { message: 'Foo' },
    { message: 'Bar' }
    ]
    }
    })
    对象:
  1. <div v-for="(value, key, index) in object">
    {{ index }}. {{ key }}: {{ value }}
    </div>
  1. new Vue({ el: '#v-for-object', data: {
  1. object: {
    firstName: 'John',
    lastName: 'Doe',
    age: 30
    }
    }
    })
  2. 0. firstName: John
    1. lastName: Doe
  3. 2. age: 30

数组的操作:

重新设值

  1. // Vue.set
  2. Vue.set(vm.items, indexOfItem, newValue)
  1. 减去一项
  1. // Array.prototype.splice
  2. vm.items.splice(indexOfItem, 1, newValue)
  1. 5.组件
    全局组件
  1. Vue.component('my-component-name', {
    // ... options ...
    })
  1. 局部组件
  2.  
  3. 父组件像子组件传递数据
    props
  1. Vue.component('blog-post', {
  2. props: ['title'],
  3. template: '<h3>{{ title }}</h3>'
  4. })
  5. <blog-post title="My journey with Vue"></blog-post>
  6. <blog-post title="Blogging with Vue"></blog-post>
  7. <blog-post title="Why Vue is so fun"></blog-post>

v-bind

  1.  
  1. Vue.component('blog-post', {
    props: ['post'],
    template: `
    <div class="blog-post">
    <h3>{{ post.title }}</h3>
    <div v-html="post.content"></div>
    </div>
    `
    })
  1. <blog-post
    v-for="post in posts"
    v-bind:key="post.id"
    v-bind:post="post"
    ></blog-post>
  1. 子组件向父组件传递数据
  2.  
  3. https://www.cnblogs.com/daiwenru/p/6694530.html
    https://blog.csdn.net/u011175079/article/details/79161029
    https://blog.csdn.net/lander_xiong/article/details/79018737

vue 学习 一的更多相关文章

  1. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  2. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  3. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  4. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

  5. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  6. vue学习第一篇 hello world

    计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...

  7. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  8. vue学习笔记(二)——简单的介绍以及安装

    学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...

  9. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  10. Vue学习2:模板语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Windows 关闭win32 控制台

    {     fclose(pf); BOOL ret = FreeConsole(); }

  2. ROS 自定义消息类型方法

    流程 1.在package中新建文件夹名为msg 2.在msg文件夹中创建消息(此处以my_msg.msg)为例,注意的是要以msg为后缀名 内容举例如下: int32 data1 float64 d ...

  3. (转)Android--使用Canvas绘图

    转:http://www.cnblogs.com/plokmju/p/android_canvas.html 前言 除了使用已有的图片之外,Android应用常常需要在运行时根据场景动态生成2D图片, ...

  4. transient在java中的作用

    java 的transient关键字的作用是需要实现Serilizable接口,将不需要序列化的属性前添加关键字transient,序列化对象的时候,这个属性就不会序列化到指定的目的地中. trans ...

  5. VS2017+QT5.12环境配置与动态链接库的生成

    最近需要重新编译一个DLL动态链接库,由于源码中包含了QT代码,所以现在需要配置VS+QT环境. 本人系统环境:Win10 64位 一.安装 Visual Studio 2017软件下载安装教程:ht ...

  6. linux /bin/find 报错:paths must precede expression 及find应用

    1.问题描述,运行下面的命令,清楚日志 [resin@xx ~]$ ssh xxx  "/usr/bin/find /data/logs/`dirname st_qu/stdout.log` ...

  7. js怎样截取以'-'分割的字符串

    在日期2019-09-01,怎样截取年只要月和日,下面是主要代码 var aa = '2019-09-01'; var bb = aa.split('-'); console.log(bb);//打印 ...

  8. 五. Arrow Function 箭头函数

    箭头函数三大好处: 1. 简明的语法 举例: 如果只有一个参数,可以不加(),多个参数用 "," 隔开 2. 隐式返回 首先说下什么是显示返回,显示返回就是 return 加上你要 ...

  9. Verilog与VHDL的混合模块例化

    1,大小写与转义 对VHDL解释器而言,对于模块名和端口名, (1) 若有转义 a) 先不考虑转义,寻找与字符串完全相同的VHDL模块: 若找不到: b) 考虑转义,寻找对应的Verilog模块. ( ...

  10. HTML和css简单日常总结

    今天主要学习了两个部分:第一部分html:在w3school学习了一些标签的使用和一些属性和方法,例如一些标签<a>,<h1><h6><from>< ...