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. 第一次3D打印，一个简单的小方块(rhino)

    一.建模 打开犀牛,我们选择立方体 我们点击上册的中心点 输入0,然后回车0 而后我们输长度:10,回车确认 同样的,宽度10 高度同样是10 回车确认后,我们得到一个正方形 二.导出模型 我们选择文 ...

  2. .NET 原生驾驭 AI 新基建实战系列（三）：Chroma ── 轻松构建智能应用的向量数据库

    在人工智能AI和机器学习ML迅猛发展的今天,数据的存储和检索需求发生了巨大变化.传统的数据库擅长处理结构化数据,但在面对高维向量数据时往往力不从心.向量数据库作为一种新兴技术,专为AI应用设计,能够高 ...

  3. 从零实现富文本编辑器#2-基于MVC模式的编辑器架构设计

    在先前的规划中我们是需要实现MVC架构的编辑器,将应用程序分为控制器.模型.视图三个核心组件,通过控制器执行命令时会修改当前的数据模型,进而表现到视图的渲染上.简单来说就是构建一个描述文档结构与内容的 ...

  4. Asp .net core JWT验证

    Jwt .wiz-editor-body .wiz-code-container { position: relative; padding: 8px 0; margin: 5px 0; text-i ...

  5. 解决React Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

    问题 当我使用如下方式调用组件子组件UploadModal并且绑定Ref时React报错"Warning: Function components cannot be given refs. ...

  6. Harmony 动态路由框架：TheRouter 开源

    TheRouter 是一个用于移动端APP,包括 Android.iOS.Harmony 三端的模块化.组件化开发的一整套解决方案框架.提供了三端高一致性,对移动端开发者更友好,让开发人员更适应,使用 ...

  7. Excel导入操作，poi

    导入操作,仅供参考,具体情况具体而论 @Override public ReturnObject inforImport(LogySbjsJdsbqxxxParts entity, HttpServl ...

  8. python 3 No module named ‘Crypto‘ 解决方案

    pip3 install pycryptodome pip3 install crypto Pip3 install pycrypto 本机(mac)环境的解决方案: pip3 uninstall p ...

  9. 代码随想录第二十三天 | Leecode 39. 组合总和、40.组合总和II、131. 分割回文串

    Leecode 39. 组合总和 题目描述 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target ,找出 candidates 中可以使数字和为目标数 target 的 ...

  10. 仿EXCEL插件，智表ZCELL产品V2.2 版本发布，增加获取单元格类型、样式功能，优化键盘事件、数值千分位等功能

    详细请移步 智表(ZCELL)官网www.zcell.net 更新说明  这次更新主要应用户要求,增加获取单元格类型.样式功能,优化键盘事件.数值千分位等功能 ,欢迎大家体验使用. 本次版本更新内容如 ...