Vue零基础入门之模板语法与数据绑定及Object.defineProperty方法详解

目录
  • 初识vue
  • 模板语法
    • 插值语法
    • 指令语法
  • 数据绑定
    • 单向绑定
    • 双向绑定
  • el和data的两种写法
    • el
    • data
  • Object.defineProperty方法
  • 事件处理
  • 事件修饰符
  • 键盘事件
    • 定义命名(不常用)

初识vue

vue工作时,必须先创建Vue实例,且要传入一个配置对象

容器内的代码依然符合html规范,混入了一些特殊的Vue语法

 <div id="root">
        <h1>hello,{{name}}</h1>
  </div>
// 创建一个实例
        new Vue({
            el:'#root',//el用于指定当前vue实例为那个容器使用,值通常为css选择器字符串
            data:{ //data中用于存储数据,数据供el所指定的容器使用
                name:'尚硅谷'
            }
        })
  • Vue实例和容器是一一对应关系
  • {{xxx}}中的xxx要写js表达式,xxx可以自动读取到data中的所有属性
  • data数据一旦发生变化,模板中用到数据的地方也会发生变化

模板语法

插值语法

{{xxx}},常写在标签体内

指令语法

  • 用于解析标签(包括:标签属性、标签体内容、绑定事件…)
  • 形式均为v-xxx,如:v-bind
<div id="root">
      <!-- 指令语法 -->
    	<a :href="url.toUpperCase()" rel="external nofollow" ></a>//js表达式执行
        <a v-bind:href="url" rel="external nofollow"  rel="external nofollow" >百度</a>
        <a :href="url" rel="external nofollow"  rel="external nofollow" >简写,百度</a>
    //使用v-bind指令后,href中的url即为js表达式,此处即为	http://baidu.com
    //v-bind指令可以简写为 :
    </div>
    <script type="text/javascript">
          Vue.config.productionTip = false//防止在vue启动时产生提示
        new Vue({
            el:'#root',
            data:{
                name:'三万小',
                url:'http://baidu.com',
            }
        })
    </script>

数据绑定

单向绑定

v-bind:

  • 数据只能从data流向页面(页面数据改变时,data不改变;data改变页面也改变)
  • v-bind指令可以简写为

双向绑定

v-model:

  • data数据改变页面数据也改变,修改页面数据也可改变data
  • 一般应用于表单类元素上(即有value的,如input select等)
  • v-model:value可简写为 v-model=‘xxx’

el和data的两种写法

el

  • new Vue时配置el属性
  • 先创建vue实例,通过v.$mount(‘#root’)指定el的值

data

  • 对象式
  • 函数式(学习组件时必须使用函数式写法)
  • 写函数式时,必须要return返回对象

注:Vue管理的函数,不能写箭头函数,否则this指向不为Vue实例

Object.defineProperty方法

  • 定义新属性或修改原有属性
  • Object.defineProperty(obj,props,descriptor)
  • 返回值是 传入函数的对象
       let person = {
            name:'张三',
            sex:"男"
        }
        // Object.defineProperty(对象名,需添加的属性名,方法属性)
        Object.defineProperty(person,'age',{
            value:'18',//给person添加age:'18'
            // enumerable:true,//控制属性是否可以枚举(遍历),默认值为false
            // writable:true,//控制属性是否可以被修改,默认值为false
            // configurable:true,//控制属性是否可以被删除,默认值为属性
		}

getter函数实现了,读取age时实际读取的是number

setter函数实现了,修改age时,将age值给了number

Vue中的数据代理

  • 通过vm对象代理data对象中属性的操作,能够更加方便的操作data中的数据
  • 通过Object.definePropery()把data对象中所有属性添加到vm上为每一个添加到vm上的属性,都指定getter,setter。在getter和setter内部操作(读/写)data中的属性
  • vm._data相当于data

事件处理

1. 使用v-on:click='xxx’或者@click=‘xxx’绑定事件,其中xxx为事件名

2. 事件的回调需要配置在methods对象中,最终在vm上

3. methods中的函数不能用箭头函数,否则this就不是vm

4. 传参时 @click='xxx(参数)'的格式,其中event为@click=‘xxx($event)’

事件修饰符

  • prevent:阻止默认行为

事件修饰符可以连写

  • stop: 阻止事件冒泡
  • once: 事件只触发一次

即按钮只生效一次

  • capture: 使用事件捕捉模式
  • self: 只有event.target时当前操作的元素是才触发事件
  • passive: 事件的默认行为立即执行,无需等待事件回调函数

键盘事件

常用按键名

Vue常用按键名:

  1. 回车 => enter
  2. 删除 =>delete
  3. 退出 => esc
  4. 空格 => space
  5. 换行 => tab(必须绑定keydown事件才管用)
  6. 上 => up
  7. 下 => down
  8. 左 => left
  9. 右 => right

特殊按键(修饰键)名

ctrl、alt、shift、meta的使用

  • keyup事件:在按下修饰键时,再按下其他键,随后释放其他键,事件被触发
  • keydown事件:可直接使用

设置只有其他键为y时才能触发事件,其他键都不可以

定义命名(不常用)

Vue.config.keyCodes.自定义键名 = 键名对应的键码

注:Vue未提供别名的按键,可直接使用原始按键名,但注意要写成kebab-case格式(如CapsLock写成caps-lock)

到此这篇关于Vue零基础入门之模板语法与数据绑定及Object.defineProperty方法详解的文章就介绍到这了,更多相关Vue模板语法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue的模板语法以及实战案例

    目录 前言 一.双大括号表达式 二.插值 2.1文本 2.2 原始 HTML 2.3 特性 2.4 javascript 表达式 三.指令 3.1 参数 3.2 动态参数 3.3 修饰符 四.指令缩写 4.1 v-bind 4.2 v-on 总结 前言 相信模板语法大家多少都有所接触,例如百度模板引擎.ejs 等等.同样 Vue.js 也使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规

  • Vue响应式原理及双向数据绑定示例分析

    目录 前言 响应式原理 双向数据绑定 前言 之前公司招人,面试了一些的前端同学,因为公司使用的前端技术是Vue,所以免不了问到其响应式原理和Vue的双向数据绑定.但是这边面试到的80%的同学会把两者搞混,通常我要是先问响应式原理再问双向数据绑定原理,来面试的同学大都会认为是一回事,那么这里我们就说一下二者的区别. 响应式原理 是Vue的核心特性之一,数据驱动视图,我们修改数据视图随之响应更新,就很优雅~ Vue2.x是借助Object.defineProperty()实现的,而Vue3.x是借助

  • 深入了解Vue中双向数据绑定原理

    目录 数据的变化反应到视图 命令式操作视图 声明式操作视图 小结 视图的变化反应到数据 现存的问题 数据的变化反应到视图 前面我们了解到数据劫持之后,我们可以在数据发生修改之后做任何我们想要做的事情,操作视图当然也是OK的 命令式操作视图 目标:我们通过原始的操作dom的方式让每一次的name的最新值都能显示到p元素内部 <div id="app"> <p></p> </div> <script> let data = { n

  • Vue.js 模板语法和数据绑定

    目录 模板语法 数据绑定 el的两种写法 data的两种写法 模板语法 Vue 模板语法有两大类 插值语法: 功能:用于解析标签体内容 写法:{{xxx}},xxx是js表达式,可以读取到 data 中属性 指令语法: 功能:用于解析标签(标签属性.标签体内容.绑定事件...) 写法:v-bind:href="xxx" 或简写为 :href="xxx",xxx是js表达式,可以读取到 data 中属性 <!DOCTYPE html> <html l

  • Vue3中的模板语法和vue指令

    目录 1 模板插值语法 2 指令 1 模板插值语法 在script 声明一个变量可以直接在template 使用用法为{{变量名称}} 模板语法是可以编写条件运算的 运算也是支持的 操作API 也是支持的 <template> {{ message }} {{ message2==0 ? '我是老大' : '我笑的' }} {{ message2 + 1 }} {{ message.split('').map(v => `4546$v`) }} </template> <

  • vue用Object.defineProperty手写一个简单的双向绑定的示例

    前言 上次写了一个Object.defineProperty() 不详解,文末说要写用它来写个双向绑定.说话算话,说来就来 前文链接 Object.defineProperty() 不详解 先看最后效果 model演示.gif 什么是双向绑定? 1.当一个对象(或变量)的属性改变,那么调用这个属性的地方显示也应该改变,模型到视图(model => view) 2.当调用属性的这个地方改变了这个属性(通常是一个表单元素),那么这个对象(或变量)的属性也会改为最新的值 ,即视图到模型(view =>

  • Vue中的Object.defineProperty全面理解

    目录 Object.defineProperty理解 一.直接添加 二.使用getter.setter 需要Object.defineProperty()注意点 Object.defineProperty理解 定义:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象. 一.直接添加 let person = {     name:'张三',     sex:'男', } Object.defineProperty(per

  • Vue零基础入门之模板语法与数据绑定及Object.defineProperty方法详解

    目录 初识vue 模板语法 插值语法 指令语法 数据绑定 单向绑定 双向绑定 el和data的两种写法 el data Object.defineProperty方法 事件处理 事件修饰符 键盘事件 定义命名(不常用) 初识vue vue工作时,必须先创建Vue实例,且要传入一个配置对象 容器内的代码依然符合html规范,混入了一些特殊的Vue语法 <div id="root"> <h1>hello,{{name}}</h1> </div>

  • Django零基础入门之模板变量详解

    引言: 我们在页面上会看到,谁登录的就会显示谁的信息,那么这个页面上的变量信息是怎样实现的呢? 这就是本文要讲述的内容--Django中的模板变量! 1.模板变量! 可以在前端页面中使用模板变量来取数据库中的数据,实现前端页面数据动态显示. (1)模板变量使用规则:(在HTML模板中使用!) 语法: {{ 变量名 }} 命名由字母和数字以及下划线组成,不能有空格和标点符号 可以使用字典.类对象.方法.函数.列表.字符串 不要和python或django关键字重名 注意: 如果data是一个字典,

  • VUE零基础入门axios的使用

    目录 一.axios是什么 二.axios的特点 三.axios怎么安装 四.在VUE全局挂载 导入 挂载 使用 五.axios便捷方法 六.axios基础方法 七.axios执行结果 八.config axios 配置 九.restFul 九.如何审查元素 一.axios是什么 axios是一款ajax请求工具,是一个用于发送ajax请求的HTTP库,本质上是对AJAX的封装.而且Axios支持 Promise操作, 让我们无需再使用传统callback方式来进行异步编程.(Promise 是

  • 改变vue请求过来的数据中的某一项值的方法(详解)

    由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 在 <template> <div> <ul> <li v-for = " (item,index) in list" v-text='`${item} - ${index} `'>&

  • Vue基础之MVVM,模板语法和数据绑定

    目录 1. Vue概述 Vue官网 MVVM架构模式 Vue简介 2. 初识Vue 3. 模板语法 1.插值语法: 2.指令语法: 4. 数据绑定 5. el与data的两种写法 1.el有2种写法new 2.data有2种写法 3.一个重要的原则: 总结 1. Vue概述 Vue官网 英文官网: https://vuejs.org/ 中文官网: https://cn.vuejs.org/ MVVM架构模式 MVVM简介 MVVM 由 M:Model 模型,V:View 视图 ,VM:ViewM

  • Jquery 模板数据绑定插件的使用方法详解

    1 绑定后台数据到指定模板(无嵌套,内容均为后台数据原始信息,前台绑定)以通话记录页为例:首先指定目标容器: 复制代码 代码如下: <dl class="box_pannel_content_filled_border none" id="gvRecCalls">   <dd class="bg_blue">    <p class="width_level_half_2 fl nopitch"&

  • Django零基础入门之自定义标签及模板中的使用

    目录 自定义标签: 第一部分 (1)视图函数编写: (2)编写模板文件: (3)自定义标签实现: (4)效果展示: 第二部分 (1)视图函数编写: (2)编写模板文件: (3)自定义标签实现: 第三部分 紧接上文--<Django零基础入门之自定义过滤器及模板中的使用>,本文来讲一讲自定义标签!!! 自定义标签: 源码学习: template.Library().simple_tags(): def simple_tag(self, func=None, takes_context=None,

  • Django零基础入门之自定义过滤器及模板中的使用

    目录 引言 自定义过滤器 (1)首先 (2)内置过滤器lower的使用: (3)自定义过滤器的使用: (4)模板中使用自定义过滤器: (5)效果展示: 引言 分析Django内置的模板过滤器: 通过分析可以将内置的过滤器理解为: 一个带有一个或两个参数的python函数: (输入的)变量的值[注意:不一定是字符串形式,在前面也讲过可以是哪些类型.] 参数的值--可以有一个初始值,或者完全没有参数.   自定义过滤器 新建一个名为ceshi的app以供本文学习使用: 自定义过滤器及标签所在的tem

  • Django零基础入门之常用过滤器详解

    引言: 前面讲过了Django中使用模板变量.使用很简单,那么有没有什么关于模板变量的骚操作呢? 答案是肯定有的,这就是本文要讲的--过滤器! 1.过滤器 (1)纯干货讲解: 作用: 对变量进行过滤.在真正渲染出来之前,过滤器会根据功能处理好变量,然后得出结果后再替换掉原来的变量展示出来. 语法:{{ fruits|lower }} 管道符号进行链式调用(可以理解为嵌套使用!),比如实现一个功能,先把所有字符变成小写,再把第一个字符转换成大写. 语法:{{fruits|lower|capfirs

  • Django零基础入门之调用漂亮的HTML前端页面

    引言:    Django如何调用HTML前端页面呢? Django怎样去调用漂亮的HTML前端页面呢? 就直接使用render方法即可! render方法是django封装好用来调用HTML前端模板的方法! 1.模板放在哪? 在主目录下创建一个templates目录用来存放所有的html的模板文件.(如果是使用pycharm创建django项目的话,默认就会自动创建这个目录哦!但是用命令创建django项目的话是没有此目录的!) templates目录里面再新建各个以app名字命名的目录来存放

随机推荐