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官方文档(文档都 ...
随机推荐
- Android代码书写规范
1.资源文件命名规则2.类名文件命名规则3.尽量少用枚举4.public方法.重要逻辑.主要类结构体必须注释,其他部分可自定注释5.提交代码必须描述清楚修改内容,如果一次提交内容过多,拆分功能进行多次 ...
- wap2app(一)-- 网站快速打包成app
工具:HBuilder,下载地址:http://www.dcloud.io/ 下载并安装HBuilder后,打开编辑器,选择:文件 -> 新建 -> 项目,出现如下图: 选择wap2app ...
- C# Params的使用
using System; namespace Params { class Program { static void Main(string[] args) { PrintMany("H ...
- 区块链:创建简单的HelloWorld-WebDApp
Node.js 一个建立在Chrome的JavaScript运行环境上的平台,用以容易地建立快速而可扩展的网络应用:下载地址:https://nodejs.org/en/ Turffle 以太坊(Et ...
- 查看Windows服务器安装了那些SQL Server组件
如何查看Windows服务器安装了那些SQL Server组件呢? 最近就遇到这样一个需求,需要知道Windows服务器是否安装了Replication组件,那么有几种方法查看Windows服务器安装 ...
- cookie 和session 的区别(转)
二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪录下来.当下次你再光临同一个网站,WEB 服务器会先看看有 ...
- python 常见函数的用法
filter(function,ls) 函数包括两个参数,分别是function和list.该函数根据function参数返回的结果是否为真来过滤list参数中的项,最后返回一个新列表. 如: map ...
- 预热一下吧《实现Redis消息队列》
应用场景 为什么要用redis?二进制存储.java序列化传输.IO连接数高.连接频繁 一.序列化 这里编写了一个java序列化的工具,主要是将对象转化为byte数组,和根据byte数组反序列化成ja ...
- 【PAT】B1007 素数对猜想
素数筛筛出规定范围内的所有素数存入数组 遍历数组,如果满足于后边的差2,计数器加加 #include <cstdio> const int maxn = 10000001; int pri ...
- JavaScript函数式编程
一段糟糕透顶的海鸥seagulls程序 鸟群合并conjoin则变成了一个更大的鸟群,繁殖breed则增加了鸟群的数量,增加的数量就是它们繁殖出来的海鸥的数量 //Flock 群 var ...