Vue学习-基本指令
一、关于vue介绍:https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247485737&idx=1&sn=14fe8a5c72aaa98c11bf6fc57ae1b6c0&source=41#wechat_redirect
这里有vue作者详细介绍vue的各个部分。
二、简单指令:
1、 dom绑定vue实例--->通过el关键字绑定:参数可以是选择器也可以是实际的dom元素-->data绑定数据--->通过小胡子语法绑定数据。
1)绑定数据 使用小胡子语法即双大括号绑定{{}}。
<div id="app">
<p>{{message}}</p>
</div>
<script src="./vue.js" ></script>
<script>
let message='hi evil';
let seleDom=document.getElementById('app');
var appVue=new Vue(
{
el:seleDom,//or #app
data:{
message
}
}
) </script>
我们可以通过console控制台来更改数据源,来查看是否更改view层。
查看appVue 我们 可以看到他的有message的属性值也就是我们绑定的数据。我们通过appVue.message更改数据。
2、v-model 绑定数据:
我们通过更改model 之后view层也随之改变。也就是说Vue帮我们做了,数据层的绑定并监听数据层的改变,随之更改view层。因为Vue是mvvm的结构即:数据层更改改变视图层视图层改变更改数据层。
视图层更改数据:
<div id="app"> <input type="text" v-model="message">
<p>现在数据:{{message}}</p>
</div>
<script src="./vue.js" ></script>
<script>
let message='hi evil';
let seleDom=document.getElementById('app');
var appVue=new Vue(
{
el:seleDom,//or #app
data:{
message
}
}
) </script>
总结:vue实现了数据层状态改变 更改view层,view层更改数据层也随之更改,这种方式的双向数据绑定,区别与我们原生js和jquery 原生js和jquery需要我们通过事件或者逻辑判断数据的更改 来通过js进行相应的数据层和视图层的更改。
3、v-bind 绑定标签的一些属性 title 、class、自定义一些属性等等。
<p v-bind:tilte='message' v-bind:number='number'>现在数据:{{message}}</p>
注意:无论是数据的绑定还是属性的绑定我们还是有事件绑定后面都可以跟表达式,后面可以跟实际的数据也可以是表达式。
let message='hi evil';
let seleDom=document.getElementById('app'); let arra=[,,,];
var appVue=new Vue(
{
el:seleDom,//or #app
data:{
message,
number:,
arra
}
}
)
<p v-bind:title='arra.map((item,index)=>item*2)'>表达式=》{{arra.map((item,index)=>item*)}}</p>
输出:
4、v-on :事件绑定
<div id="app">
<input type="text" v-on:input="checkInput">
<p>message数据为:{{mesg}}</p>
</div>
<script src="./vue.js"></script>
<script>
let mesg='hi Vue'
let vm=new Vue(
{
el:'#app',
data:{
mesg
},
methods:{
checkInput(ev){
console.log(ev.target.value);
this.mesg=ev.target.value;
}
}
}
)
</script>
总结: 我们在jQuery、原生js中,在事件中,this代表的是触发事件本身的dom对象,但是在vue中,不允许我们在js中操作dom,所以这个this 不是指向触发dom对象的本身,在箭头函数中,this指向父级的作用域,所以指向methods,而methods的作用域是vm所以指向vue实例对象,而vue实例对象本身的信息我们在上面已经输出,包含数据的,所以我们在更改数据的时候,直接通过this.xxx来更改数据,来更改视图。
绑定的事件函数 是在vue实例的中methods属性进行绑定。
Vue学习-基本指令的更多相关文章
- vue学习之指令简写以及事件笔记
1.v-bind:××× 可简写为 :××× 2.v-on:××× 可简写为 @××× 例: v-on:click 可简写为 @click (官网文档介绍) 3.vue处理事件 <!-- 阻止单 ...
- vue学习(二)Vue常用指令
2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...
- vue学习04 v-on指令
vue学习04 v-on指令 v-on的作用是为元素绑定事件,比如click单击,dbclick双击 v-on指令可简写为@ 代码测试 <!DOCTYPE html> <html l ...
- vue学习06 v-show指令
目录 vue学习06 v-show指令 v-show指令是:根据真假切换元素的显示状态 原理是修改元素的display,实现显示隐藏 指令后面的内容,最终都会解析为布尔值(true和false) 练习 ...
- vue学习08 v-bind指令
目录 vue学习08 v-bind指令 v-bind指令的作用是为元素绑定属性 完整写法是v-bind:属性名,可简写为:属性名 练习代码为: 运行效果为: vue学习08 v-bind指令 v-bi ...
- vue学习-day01(vue指令)
目录: 1.什么是vue.js 2.为什么要学习前端的流行框架 3.框架和库的区别 4.后端MVC和前端的MVVM的区别 5.vue.js的基本代码--hollo world代 ...
- Vue学习-01
1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- vue学习心得
前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...
随机推荐
- Spring学习之旅(一)极速创建Spring框架java工程项目
编译工具:eclipse 1)创建java工程:Spring_helloworld 2)导入所需jar包: 3)创建一个实体类: public class HelloBeans { private S ...
- Android Studio 之 项目瘦身、代码检查
项目瘦身, 一.删除没有用到的资源(图片,string 等等) 先看怎么样找到没有用到的资源,注意:注释掉的 也属于没有用到的. 1.进行代码分析操作 2.查看分析结果 3.选择 Unused res ...
- Android广播机制的基本使用
一提到广播我们第一感觉就会联想到小时候村里面的广播,安卓的广播机制也是类似于大喇叭.有发送广播的地方,也有接收广播的地方.但是具体怎么操作呢,我们来一步一步的看下去~ 安卓的广播种类 系统发送的广播: ...
- (网页)java数组去重总结(转)
转自CSDN: 1.背景 根据不同的业务逻辑,经常会遇到数组中存在多个重复元素的场合,总结了下数组的排序,留个记录. 2.实现方法 总结了四种方法,接下来进行展示 1.方法一 //数组去重方法一 ...
- Android ListView的item背景色设置以及item点击无响应等相关问题
Android ListView的item背景色设置以及item点击无响应等相关问题 在Android开发中,listview控件是非常常用的控件,在大多数情况下,大家都会改掉listview的ite ...
- 如何训练AI
如何训练AI让其更加智能,而不是用特定的代码控制AI逻辑! AI守则 首先应该为机器人设置几个必要信息: 目标 规则 能力 目标,规定机器人要做到什么. 规则,规定机器人的限制,不能做什么. 能力,规 ...
- java面试整理(会持续更新..)
本人出道至今,经历了大大小小百余场战斗,,,下面整理的面试题有些有答案,有些没答案,那个谁说过:"要抱着怀疑的态度去编程,所以,即便有答案,也不一定正确,即便我本地正确,但是由于屏幕前的你和 ...
- weblogic系列漏洞整理 -- 5. weblogic SSRF 漏洞 UDDI Explorer对外开放 (CVE-2014-4210)
目录 五. weblogic SSRF 漏洞 UDDI Explorer对外开放 (CVE-2014-4210) 1. 利用过程 2. 修复建议 一.weblogic安装 http://www.cnb ...
- The concurrent snapshot for publication 'xxx' is not available because it has not been fully generated or the Log Reader Agent is not running to activate it
在两台测试服务器部署了复制(发布订阅)后,发现订阅的表一直没有同步过来.重新生成过snapshot ,也重新初始化过订阅,都不能同步数据,后面检查Distributor To Subscriber H ...
- Fatal error: Can't open and lock privilege tables: Table 'mysql.host' doesn't exist
今天在用一键安装mysql的shell脚本安装mysql-5.1.73软件后发现mysql始终无法启动,多次执行后依旧报错,只能去查看error日志,发现了如下的2个错误: 错误一:Fatal err ...