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）绑定数据使用小胡子语法即双大括号绑定{{}}。

 1 <div id="app">
 2     <p>{{message}}</p>
 3 </div>
 4 <script src="./vue.js" ></script>
 5     <script>
 6         let message='hi evil';
 7         let seleDom=document.getElementById('app');
 8         var appVue=new Vue(
 9             {
10                 el:seleDom,//or  #app
11                 data:{
12                     message
13                 }
14             }
15         )
16
17     </script>

我们可以通过console控制台来更改数据源，来查看是否更改view层。

查看appVue 我们可以看到他的有message的属性值也就是我们绑定的数据。我们通过appVue.message更改数据。

2、v-model 绑定数据：

我们通过更改model 之后view层也随之改变。也就是说Vue帮我们做了，数据层的绑定并监听数据层的改变，随之更改view层。因为Vue是mvvm的结构即：数据层更改改变视图层视图层改变更改数据层。

视图层更改数据：

 1 <div id="app">
 2
 3     <input type="text" v-model="message">
 4     <p>现在数据：{{message}}</p>
 5 </div>
 6 <script src="./vue.js" ></script>
 7     <script>
 8         let message='hi evil';
 9         let seleDom=document.getElementById('app');
10         var appVue=new Vue(
11             {
12                 el:seleDom,//or  #app
13                 data:{
14                     message
15                 }
16             }
17         )
18
19     </script>

总结：vue实现了数据层状态改变更改view层，view层更改数据层也随之更改，这种方式的双向数据绑定，区别与我们原生js和jquery 原生js和jquery需要我们通过事件或者逻辑判断数据的更改来通过js进行相应的数据层和视图层的更改。

3、v-bind 绑定标签的一些属性 title 、class、自定义一些属性等等。

1 <p  v-bind:tilte='message' v-bind:number='number'>现在数据：{{message}}</p>

注意：无论是数据的绑定还是属性的绑定我们还是有事件绑定后面都可以跟表达式，后面可以跟实际的数据也可以是表达式。

 1         let message='hi evil';
 2         let seleDom=document.getElementById('app');
 3
 4         let  arra=[1,2,3,4];
 5         var appVue=new Vue(
 6             {
 7                 el:seleDom,//or  #app
 8                 data:{
 9                     message,
10                     number:22,
11                     arra
12                 }
13             }
14         )

1 <p v-bind:title='arra.map((item,index)=>item*2)'>表达式=》{{arra.map((item,index)=>item*2)}}</p>

输出：

4、v-on ：事件绑定

 1    <div id="app">
 2         <input   type="text" v-on:input="checkInput">
 3         <p>message数据为：{{mesg}}</p>
 4     </div>
 5     <script src="./vue.js"></script>
 6     <script>
 7         let  mesg='hi Vue'
 8         let  vm=new Vue(
 9             {
10                 el:'#app',
11                 data:{
12                     mesg
13                 },
14                 methods:{
15                     checkInput(ev){
16                         console.log(ev.target.value);
17                         this.mesg=ev.target.value;
18                     }
19                 }
20             }
21         )
22     </script>

总结：我们在jQuery、原生js中，在事件中，this代表的是触发事件本身的dom对象，但是在vue中，不允许我们在js中操作dom，所以这个this 不是指向触发dom对象的本身，在箭头函数中，this指向父级的作用域，所以指向methods，而methods的作用域是vm所以指向vue实例对象，而vue实例对象本身的信息我们在上面已经输出，包含数据的，所以我们在更改数据的时候，直接通过this.xxx来更改数据，来更改视图。

绑定的事件函数是在vue实例的中methods属性进行绑定。

转载于:https://www.cnblogs.com/evilliu/p/10020064.html

Vue学习-基本指令相关推荐

vue学习-自定义指令
vue全局指令在main.js注册全局指令使用:元素上加上v-自定义指令名 // GlobalRedBG.js export default {install: (app, option) =&g ...
Vue学习（入门实例、常用指令）-学习笔记
文章目录 Vue学习(入门实例.常用指令)-学习笔记实例常用指令 v-on v-bind v-for v-html v-if event v-model 双向数据绑定实现 - defineProp ...
教女朋友学习 vue中的指令及其自定义指令
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
Vue学习之旅Part1：Vue的数据渲染语法和指令(插值表达式、v-cloak、v-text、v-html)
在Vue里有好几种数据渲染的方法及相关指令下面将一一介绍: 一.插值表达式插值表达式是用两个花括号{{}}包裹属性属性在Vue实例里定义: 通过Vue提供的指令即可很方便地将数据渲染到页面上 ...
好程序员Web前端教程分享Vue学习心得
为什么80%的码农都做不了架构师?>>> 好程序员Web前端教程分享Vue学习心得,Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向 ...
Vue学习(一)-邂逅Vuejs
Vue学习(一)- 邂逅Vuejs 零.视频链接一.邂逅Vuejs 1.认识Vuejs 1.1 为什么学习Vuejs 1.2 简单认识一下Vuejs 2.Vuejs安装方式 2.1 CDN引入 2. ...
Vue 学习第五天学习笔记
Vue 学习第五天 1. keyup事件 <div id="app"> <input type="text" v-model=" ...
Vue 学习之 7.01 学习笔记
Vue 学习之 7.01 学习笔记 1.还是复习前面的那个"品牌案例管理",但是数据不是静态写死哦,而是动态的管理,向数据库发送相关请求实现,因此,小节和昨天所学就是掌握Vu ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...

Vue学习-基本指令

Vue学习-基本指令相关推荐

最新文章

热门文章