vue引入

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>01_HelloWorld</title>

</head>

<body>

<!--

  1. 引入Vue.js

  2. 创建Vue对象

    el : 指定根element(选择器)

    data : 初始化数据(页面可以访问)

  3. 双向数据绑定 : v-model

  4. 显示数据 : {{xxx}}

  5. 理解vue的mvvm实现

-->

<!--模板-->

<div id="test">

  <input type="text" v-model="msg"><br><!--指令-->

  <input type="text" v-model="msg"><!--指令-->

  <p>hello {{msg}}</p><!--大括号表达式-->

</div>

<script type="text/javascript" src="../js/vue.js"></script>

<script type="text/javascript">

  const vm = new Vue({ // 配置对象 options

    // 配置选项(option)

    el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域

    data: {

      msg: 'atguigu'

    }

  })

</script>

</body>

</html>

模板语法

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>02_模板语法</title>

</head>

<body>

<!--

1. 模板的理解:

  动态的html页面

  包含了一些JS语法代码

    大括号表达式

    指令(以v-开头的自定义标签属性)

2. 双大括号表达式

  语法: {{exp}} 或 {{{exp}}}

  功能: 向页面输出数据

  可以调用对象的方法

3. 指令一: 强制数据绑定

  功能: 指定变化的属性值

  完整写法:

    v-bind:xxx='yyy'  //yyy会作为表达式解析执行

  简洁写法:

    :xxx='yyy'

4. 指令二: 绑定事件监听

  功能: 绑定指定事件名的回调函数

  完整写法:

    v-on:click='xxx'

  简洁写法:

    @click='xxx'

-->

<div id="app">

  <h2>1. 双大括号表达式</h2>

  <p>{{content}}</p>

  <p>{{content.toUpperCase()}}</p>

  <h2>2. 指令一: 强制数据绑定</h2>

  <a href="url">访问指定站点</a><br>

  <a v-bind:href="url">访问指定站点2</a><br>

  <a :href="url">访问指定站点2</a><br>

  <h2>3. 指令二: 绑定事件监听</h2>

  <button v-on:click="test">点我</button>

  <button @click="test">点我</button>

</div>

<script type="text/javascript" src="../js/vue.js"></script>

<script type="text/javascript">

  new Vue({

    el: '#app',

    data: {

      content: 'NBA I Love This Game',

      url: 'http://www.atguigu.com'

    },

    methods: {

      test () {

        alert('好啊!!!')

      }

    }

  })

</script>

</body>

</html>

计算属性和监视

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>03_计算属性和监视</title>

</head>

<body>

<!--

1. 计算属性

  在computed属性对象中定义计算属性的方法

  在页面中使用{{方法名}}来显示计算的结果

2. 监视属性:

  通过通过vm对象的$watch()或watch配置来监视指定的属性

  当属性变化时, 回调函数自动调用, 在函数内部进行计算

3. 计算属性高级:

  通过getter/setter实现对属性数据的显示和监视

  计算属性存在缓存, 多次读取只执行一次getter计算

-->

<div id="demo">

  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>

  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>

  <!--fullName1是根据fistName和lastName计算产生-->

  姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>

  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>

  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

  <p>{{fullName1}}</p>

  <p>{{fullName1}}</p>

</div>

<script type="text/javascript" src="../js/vue.js"></script>

<script type="text/javascript">

  const vm = new Vue({

    el: '#demo',

    data: {

      firstName: 'A',

      lastName: 'B',

       fullName2: 'A-B'

    },

    // 计算属性配置: 值为对象

    computed: {

      fullName1 () { // 属性的get()

        console.log('fullName1()', this)

        return this.firstName + '-' + this.lastName

      },

      fullName3: {

        // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值

        get () {

          console.log('fullName3 get()')

          return this.firstName + '-' + this.lastName

        },

        // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值

        set (value) {// fullName3的最新value值  A-B23

          console.log('fullName3 set()', value)

          // 更新firstName和lastName

          const names = value.split('-')

          this.firstName = names[0]

          this.lastName = names[1]

        }

      }

    },

    watch: {

      // 配置监视firstName

      firstName: function (value) { // 相当于属性的set

        console.log('watch firstName', value)

        // 更新fullName2

        this.fullName2 = value + '-' + this.lastName

      }

    }

  })

  // 监视lastName

  vm.$watch('lastName', function (value) {

    console.log('$watch lastName', value)

    // 更新fullName2

    this.fullName2 = this.firstName + '-' + value

  })

</script>

</body>

</html>

class与style绑定

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>03_计算属性和监视</title>

</head>

<body>

<!--

1. 计算属性

  在computed属性对象中定义计算属性的方法

  在页面中使用{{方法名}}来显示计算的结果

2. 监视属性:

  通过通过vm对象的$watch()或watch配置来监视指定的属性

  当属性变化时, 回调函数自动调用, 在函数内部进行计算

3. 计算属性高级:

  通过getter/setter实现对属性数据的显示和监视

  计算属性存在缓存, 多次读取只执行一次getter计算

-->

<div id="demo">

  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>

  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>

  <!--fullName1是根据fistName和lastName计算产生-->

  姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>

  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>

  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

  <p>{{fullName1}}</p>

  <p>{{fullName1}}</p>

</div>

<script type="text/javascript" src="../js/vue.js"></script>

<script type="text/javascript">

  const vm = new Vue({

    el: '#demo',

    data: {

      firstName: 'A',

      lastName: 'B',

       fullName2: 'A-B'

    },

    // 计算属性配置: 值为对象

    computed: {

      fullName1 () { // 属性的get()

        console.log('fullName1()', this)

        return this.firstName + '-' + this.lastName

      },

      fullName3: {

        // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值

        get () {

          console.log('fullName3 get()')

          return this.firstName + '-' + this.lastName

        },

        // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值

        set (value) {// fullName3的最新value值  A-B23

          console.log('fullName3 set()', value)

          // 更新firstName和lastName

          const names = value.split('-')

          this.firstName = names[0]

          this.lastName = names[1]

        }

      }

    },

    watch: {

      // 配置监视firstName

      firstName: function (value) { // 相当于属性的set

        console.log('watch firstName', value)

        // 更新fullName2

        this.fullName2 = value + '-' + this.lastName

      }

    }

  })

  // 监视lastName

  vm.$watch('lastName', function (value) {

    console.log('$watch lastName', value)

    // 更新fullName2

    this.fullName2 = this.firstName + '-' + value

  })

</script>

</body>

</html>

vue_模版语法、计算属性和监视、样式绑定的更多相关文章

  1. vue学习-第三个DEMO(计算属性和监视) v-model基础用法

    <div id="demo"> 姓:<input type="text" placeholder="First Name" ...

  2. Vue的计算属性，监视属性代码理解

    1.计算属性:在computed属性对象中定义计算属性的方法,在页面中使用{{方法名}}来显示计算的结果 //计算属性 computed:{ // 计算属性值的一个方法,方法的返回值是属性值,初始化显 ...

  3. Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器

    模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...

  4. vuejs中的计算属性和监视

    计算属性 1.在computed属性对象中定义计算属性的方法,在页面上使用{{方法名}}来显示计算结果 2.通过getter/setter实现对属性数据的显示和监视 3.计算属性存在缓存,多次读取只执 ...

  5. VUE：计算属性和监视

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 3. Vue语法--计算属性

    一. 计算属性 1. 什么是计算属性? 通常, 我们是在模板中, 通过插值语法显示data的内容, 但有时候我们可能需要在{{}}里添加一些计算, 然后在展示出来数据. 这时我们可以使用到计算属性 先 ...

  7. Vue中计算属性与class,style绑定

    var vm=new Vue({ el:'#app', data:{ a:2, }, computed:{ //这里的b是计算属性:默认getter b:{ get:function(){ retur ...

  8. 前端MVC Vue2学习总结（三）——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  9. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  10. (尚004)Vue计算属性之基本使用和监视

    所做效果预览: test004.html <!DOCTYPE html><html lang="en"><head> <meta char ...

随机推荐

  1. CH9121default与classical设置方法

    SYN发送间隔调整方法: 网口连接设备后双击设备列表中要配置的设备在扩展参数中单击获取扩展参数,在超时处理模式选项选择Classical然后执行设置扩展参数,最后点击复位模块后生效(仅TCP CLIE ...

  2. Mono与IL2CPP

    Mono: Mono是.NET Framework 的一种开源实现. Mono项目将使开发者用各种语言(C#,VB.NET等)开发的.NET应用程序,能在任何Mono支持的平台上运行, 包括Linux ...

  3. il热更新（一）

    转载请标明出处:http://www.cnblogs.com/zblade/ 最近研究了一下如何在unity中实现c#的热更新,对于整个DLL热更新的过程和方案有一个初步的了解,这儿就写下来,便于后续 ...

  4. soapUI接口关联教程

    1.新建项目结构 步骤如下: 打开soapUI Pro,新建工作空间(点击File-New Workspace) 选中Test右键点击New Project 选中AlloTest右键点击New Tes ...

  5. python之“if __name__=="__main__"”的代表的意思和用法

    创建下方脚本A def print_sum(a): print(a) print_sum(20) if __name__=="__main__": print("test ...

  6. ESP-IDF教程1 开发环境

    1.开发环境 对于 ESP32 系列芯片的开发环境主要有如下几种方式: ESP-IDF(Espressif IoT Development Framework) Arduino PlatformIO ...

  7. Git常用命令大全：git命令基本用法

    1. 常用的git命令 Git 常用的六个命令是什么? ·"git clone"克隆代码: ·"git log"查看日志: ·"git tag&quo ...

  8. git-fame实战操作

    参考网址:https://pydigger.com/pypi/git-fame,https://github.com/casperdcl/git-fame Git-fame 简介: Pretty-pr ...

  9. Django中的内置Tags

    Dates {% now "m/d/Y" %} copyright {% now 'Y' as current_year %} 该tag也可以接受Django的date 变量,比如 ...

  10. linux里面的Crontab 定时任务

    一.基本概念      1.1. 概念:crond 是 Linux 下用来周期地执行某种任务或等待处理某些事件的一个守护进程,和 Windows 中的计划任务有些类似. 我们经常使用的是crontab ...