表单输入绑定
基础用法
v-model 指令在表单
、
元素上创建双向数据绑定。
v-model 本质上不过是语法糖。
它负责监听用户的输入事件以更新数据
,并对一些极端场景进行一些特殊处理
。
vue 模板语法包括两大类
- 插值语法 功能:
用于解析标签体内容
写法:{{xxx } }
,xxx是js表达式,可以直接读取到 data 中的所有区域- 指令语法 功能:
用于解析标签(包括:标签属性、标签体内容、绑定事件.)
例:,xXX同祥要js 表式,可以接取 到 data 中的所有属性
注:Vue 中有很多的指令,且形式都是 V-xxx,此处只是拿v-bind
举例
数据绑定的方式
单向绑定
v-bind :
数据只能从 data 流向页面
双向绑定v-model:
数据不仅能从 data 流向页面,还可以从页面流向data
事件的基本用法 事件处理
事件名 | 解析 |
---|---|
v-on:xxx或 @xxx | 绑定事件,其中xxx是事件名 |
2.事件的回调需要配置在 methods对象中,最终会在 vm上
3. methods中配置的函数,不要用服务器托管网箭头函数,否则 this就不是vm了
4. methods中配置的函数,都是被 Vue 所管理的函数,this的指向是vm或 组件实例对象
5. @click=“demo” 和 @click=”demo($event)”效果一致,但后者可以传参
el与data的两种写法
el 的2种写法
创建 vue 实例对象的时候配置
el 属性
先创建 vue实例,
随后再通过vm.$mount(”#root’)data 的2种写法
对象式: data: ( }
函数式: data(){return{}}
服务器托管,北京服务器服务器托管网托管,服务器租用 http://www.fwqtg.net