vueJs的简单入门以及基础语法

vue的api vue官网API

1基础语法

1-1基本数据绑定

<div id="app">{{ msg }}
</div>
//script
new Vue({el:"#app",//代表vue的范围
  data:{msg:'hello Vue' //数据
  }
})

 

在这个例子中我们可以进行赋值

var app = new Vue(...);
app.msg = '初探vue';
//那么页面的值就被改变了

 

1-2 v-html命令

 

<div id="app" v-html="msg"></div>
//script
new Vue({el:"#app",//代表vue的范围
  data:{msg:'<h1>你好,世界</h1>' //这里就不会是文本了 而是会被当成是html标签了
  }
})

 

1-3 v-on:click||@click指令

<div id="app">
<button v-on:clikc="clickHead">事件</button>
<button @click="clickHead">事件</button>
</div>//js
new Vue({el:"#app",methods:{clickHead:functoin(){alert('vue的事件绑定')}}
})//在es6语法中
对象中的函数可以
const json={clickHead(){//do something
  }
}
json.clickHead()调用方法//和一样的
const json={clickHead:function(){//do something
  }
}

1-4 v-bind 属性绑定指令


例如绑定class 和id 已经已经存在的属性 和自定义属性

绑定类名

<div id="app"><p v-bind:class="className">{{msg}}</p> 
</div>
/*
v-bind 自定义名字
v-bind:id="..."  绑定id名字
v-bind:title="..."绑定title属性
v-bind:style="..." 绑定样式属性 
v-bind:...="..."绑定自定义属性
、、、
*///js
new Vue({el:"#app",data:{msg:'这是v-bind绑定数据',className:'contatiner'},
})
const Name = document.querySelector('.contatiner');
console.log(Name) //能正常的获取这个元素

 

1-5 v-show

根据值的真假 控制元素的display的属性

<div id="app"><p v-show="msg"> 可以看到啊 </p><p v-show="msg1"> 不可以看到啊 </p> 
</div>//js
new Vue({el:"#app",data:{msg:1+1==2,msg1:1+1!=2}
})

 

1-6 v-text

赋予文本值

<div id="app"><p v-text="msg"> 可以看到啊 </p> <!-- 最终会被替换掉 1+1==2 -->
</div>//js
new Vue({el:"#app",data:{msg:'你好哈 v-text'}
})

 

1-7 v-for

循环

 <div id="app"><ol><li v-for="module in modules">{{module.msg}}</li></ol>
</div>//js
new Vue({el:"#app",data:{modules:[{msg:'第一个'},{msg:'第二个'},{msg:'第三个'},{msg:'第四个'}]}
})

 

<div id="app"><ol><input type="text" v-model ="val" @keydown.enter="list.push(val);val=''"><ul><li v-for="(item,index) in list">{{item}}<button @click="list.splice(index,1)">x</button></li></ul></ol>
</div><script>new Vue({el:"#app",data:{list:[],val:''}})
</script>

如果遍历对象:

<div id="app"><div v-for="item in list"><button @click="flag=!flag" >{{item.name}}</button><div v-show="flag" v-for="(value,key,index) in item">{{key}}:{{value}}</div></div>
</div><script>new Vue({el:"#app",data:{flag:false,list:[{name:'R730',BIOS:'2.5.2',idrac:'2.60.60'},{name:'R830',BIOS:'2.6.2',idrac:'2.70.60'},{name:'R930',BIOS:'2.7.2',idrac:'2.80.60'},{name:'R630',BIOS:'2.8.2',idrac:'2.90.60'},],val:''}})
</script>

 

1-7.2 绑定key 值的作用和原理:

不绑定key值时,当数据变化时,检查被遍历对象数据对应位置数据的变化,如果对应位置的值变化,数据将进行变化;

绑定key值后,当数据变化时, 会检查被遍历对象每一位dom 的变化,如果只是其中位置变化了,页面刷新局部dom,这样有利于提高页面性能,

测试如下:

<div id="app"><div v-for="i in list" :key="i">{{i}}</div><button @click="list=[2,3,6,4,5]">change</button><button @click="list=[1,2,3,4,5]">change</button>
</div>
<script>new Vue({el:'#app',data:{list:[1,2,3,4,5]}})
</script>

当第一次点击左边change时,index:0、1、2全变了

而点击右边change时,只有index:0变化,其他没有变化:

 

 如果想利用methods 的方法修改date中的数据:

<div id="app">
<div v-for="(i,index) in list" :key="index">{{i}}</div>
<button @click="list=[2,3,6,4,5]">change</button>
<button @click="list=[1,2,3,4,5]">change</button>
<button @click="change">change</button>
</div>
<script>
new Vue({
el:'#app',
data:{
list:[1,2,3,4,5]
},
methods:{
change(){
this.$set(this.list,4,3)//把list中的第4位改成3
}
}
})

</script>
 

 

 

1-8 v-model 双向数据绑定

<div id="app"><input type="text" v-model="msg"><p>{{msg}}</p>
</div>//js
new Vue({el:"#app",data:{msg:''}
})

 

1-9 template属性

<div id="app"><span>你好啊</span>
</div>//js
new Vue({el:"#app",data:{msg:'这是数据'},template:"<div>模板div</div>"
})

 

最终的效果是把id为app的div直接替换成template里面的元素



注意在template的值中不能含有兄弟根节点

new Vue({el:"#app",template:"<div>1<div><div>2<div>"
})

 

这样是错误的
在template 可以把团苏片段放在script标签内

<div id="app"><span>你好啊</span></div><script type="x-template" id="temp">  //这个地方就是模板片段<div id="tpl"><p> 这是模板啊,{{msg}} </p><input type="text" v-model="msg" /></div></script><script src="js/vue.min.js"></script><script>new Vue({el:"#app",data:{msg:''},template:"#temp"})</script>

 1-10 v-if 用来设置 决定一个元素显示或不显示

<div id="app">

<p v-if = "flag">now you see me {{ msg }} </p>
<p v-else>now you dont see me</p>
<button @click = "flag = !flag">{{ change }}</button>

</div>


 <script>
new Vue({
el:"#app",
data:{
msg: 'hello',
flag: false,
change: 'change'
},
})
</script>

 

2)vue实例中的属性

2-1 el

el表示在vue的实例中的作用范围

new Vue({el:"#app" //作用在id名为app的div上
})

 

2-2 data

data的属性就是数据绑定

new Vue({data:{msg:'数据的值'    arrayData:[{title:'这是1'}]}
})

 

2-3 methods

methods绑定事件

new Vue({el:"#app",methods:{mouseClick(){alert('绑定事件')}}
})

 

2-3 template

template模板的绑定

new Vue({el:"#app",template:'<div>这是模板属性</div>'
})

2-4 render

render模板的绑定

new Vue({el:"#app",render(createElement){return createElement("ol",{  //新创建的元素身上绑定属性
                style:{fontSize:'30px',border:'1px solid red',fontWeight:'bold'},attrs:{title:'你好啊',coundNum:'01',id:'ls',class:'bg'}},[createElement("li",'这是第一个文本'),createElement("li",'这是第二个文本'),createElement("li",'这是第三个文本'),])}
})

 

 

3)vue的自定义指令

在vue中除了内置的指令如v-for、v-if...,用户可以自定义指令 官网

1 //这里定义v-focus
2 directives: {
3   focus: {
4     // 指令的定义
5     inserted: function (el) {
6       el.focus()
7     }
8   }
9 }

 

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
  • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind:只调用一次,指令与元素解绑时调用。

4)vue的扩展

4-1 v-bind根据条件绑定类名

案例 比如现在在true的情况下绑定red类名

 1 <div id="app">
 2     <span :class="{red:addClass}">{{msg}}</span> <!--可以利用简单的表达式-->
 3 <!--这是v-bind指令可以省略-->
 4 </div>
 5 <script src="js/vue.min.js"></script>
 6 <script>
 7     new Vue({
 8         el:"#app",
 9         data:{
10             msg:'条件绑定类名',
11             addClass:true
12         }
13     })
14 </script>

 

4-2 v-on || @eventName 事件绑定 有一个事件修饰符

//阻止事件冒泡
<div v-on:click.stop="eventHadles"></div>
//阻止默认事件
<div v-on:click.prevent="eventHadles"></div>
//事件只能触发一次
<div v-on:click.once="eventHadles"></div>
//只能回车触发事件
<div @keyup.enter="eventHadles"></div>
//只能指定keyCode的值触发事件
<div @keyup.13="eventHadles"></div>

 

5)vue的计算属性 -computed

例如一个案例需要过滤一些列表


image.png

而我们需要利用v-for进行循环出来列表

需要用到我们的实例的属性
computed 说透点就是过滤你的数据根据你的条件进行过滤

 1 //js
 2 new Vue({
 3   el:"#app",
 4   data:{
 5     list:[
 6      {
 7         title:'你好啊',
 8         isChecked:true
 9      },
10       {
11         title:'你好啊2',
12         isChecked:false
13      }
14     ],
15     hash:'all' //过滤条件
16   },
17   computed:{ //重头戏 
18       filterData(){ 
19       //这个根据你的条件进行过滤 记住这个函数最终返回的是数据需要return 数据出来 不需要调用此函数
20         let filterDatas = {
21           all(list){
22               return list
23           },
24           unfinshed(list){
25             return list.filter(function(item){
26                 return !item.isChecked
27             })
28           },
29           finshed(list){
30               return list.filter(function(item){
31                 return item.isChecked
32             })
33           }
34         }
35         return filterDatas[你的条件]?filterDatas[你的条件](this.list):this.list
36         //这里的你的条件可以使hash值 然后很久hash值的不同进行过滤 不需要调用这个函数
37       }
38   }
39 })
40 //然后在v-for的指令中
41 <div v-for="item in filterData"></div> <!--注意不是list了 而是刚刚的computed中的计算属性的函数名字-->

 

这里的hash的值可以参考我的另一片文章前端hash

6)vue的组件

6-1 底层学习组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

 1 //html
 2 <div id="app">
 3   <my-test></my-test> <!--自定义标签-->
 4 </div>
 5 
 6 //js
 7 Vue.component('my-test',{  //注册组件
 8   template:'<div>初学组件</div>'       
 9 });
10 
11 new Vue({
12   el:"#app"
13 })

 

6-2 父子组件通信

利用props进行传值

 1 //局部组件
 2 <div id="app">
 3   <my-test msg="你好"></my-test>
 4   <my-test msg="传值2"></my-test>
 5 </div>
 6 //js
 7 new Vue({
 8   el:"#app",
 9   components:{
10     'my-test':{
11       props:['msg'],
12       template:'<div>{{msg}}</div>'
13     }
14   }
15 })
16 //全局组件
17 <div id="app">
18   <my-test msg="你好"></my-test>
19   <my-test msg="传值2"></my-test>
20 </div>
21 
22 //js
23 Vue.component('my-test',{
24   props:['msg'],
25   template:'<div>{{msg}}</div>'
26 })

 

如果需要传的值在vue的实例中

//html
<div id="app"><my-test v-bind:listData="list"></my-test>
</div>//js
new Vue({el:"#app",data:{list:[{title:'这是数据'},{title:'这是数据22'}]},components:{'my-test':{props:['listData'],template:`<select name="" id=""><option v-for="item in listData">{{item.title}}</option></select>
      `}}
})

 

7)vue获取dom元素

在想获取的元素身上
<div class="container" rel="getDom">
//js
new Vue({el:"#app",methods:{_someDo(){this.dom = this.$refs.getDom;}},mounted(){this._someDo(); //vue完成挂载 调用函数
  }
})

 

8)vue渲染dom是异步$.nextTick()函数

因为vue渲染dom是异步的所以直接操作dom是会出错的
案例 例如 创建vue实例的时候请求接口数据,然后要进行dom元素操作

new Vue({data:{result:''},created(){axios.get('/data').then(data=>{this.result = data.data  //如果在dom中用到了v-for这些元素 而我们乡操作这些元素this.$nextTick(()=>{//这个函数的意义就是等待dom渲染结束后执行
      })}).catch(err=>{//错误处理
    })}
})

 



转载于:https://www.cnblogs.com/Anderson-An/p/10063950.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/484643.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

应用数学的强大威力

来源&#xff1a;数学中国 应用数学思想是科研当中非常重要的一种思维方式以及研究方法。今天我们就借助戴世强教授的三篇有关应用数学的文章来详细了解一下这些问题&#xff1a;什么是“应用数学思维”&#xff1f;我们如何在研究中使用应用数学思维&#xff1f;应用数学思维…

正则化实现降噪,分别使用最小二乘、定步长梯度下降和回溯法的梯度下降求解最优解

正则化实现降噪&#xff0c;分别使用最小二乘、定步长梯度下降和回溯法的梯度下降求解最优解 原创文章&#xff01;转载需注明来源&#xff1a;©️ Sylvan Ding’s Blog ❤️ 实验目的 参考 INTRODUCTION TO NONELINEAR OPTIMIZATION. Amir Beck. 2014 的 3.4 Denoising …

双向 RNN

1.基本理论 双向 RNN 结合时间上从序列起点开始移动的 RNN 和另一个时间上从序列末尾开始移动的 RNN 2.逻辑图 其中 h (t) 代表通过时间向前移动的子 RNN 的状态&#xff0c;g (t) 代表通过时间向后移动的子 RNN 的状态 允许输出单元 o (t) 能够计算同时依赖于过去和未来且对时…

Hadoop伪分布式配置和搭建,hadoop单机安装,wordcount实例测试,hadoop安装java目录怎么找,问题及问题解决方法

Hadoop伪分布式配置和搭建&#xff0c;hadoop单机安装&#xff0c;wordcount实例测试&#xff0c;hadoop安装java目录怎么找&#xff0c;问题及问题解决方法 环境说明 系统&#xff1a;ubuntu18.04 主机名&#xff1a;test1 用户名&#xff1a;sylvan hadoop单机安装 换源操作…

AI时代竟有智能化鸿沟,具备哪些条件才能跨过?

来源&#xff1a;CSDN移动互联网“早古”时期&#xff0c;普通人因为收入差距问题而无法做到人手一部智能手机&#xff0c;从而导致数字鸿沟。同样&#xff0c;在当前这个AI&#xff0c;也就是人工智能扮演越来越关键作用的时代&#xff0c;企业也站在了类似的抉择交接线上——…

[js] 渲染树构建、布局及绘制

渲染树构建、布局及绘制 转载于:https://www.cnblogs.com/iiiiiher/p/10065345.html

INTRODUCTION TO NONELINEAR OPTIMIZATION Excise 5.2 Freudenstein and Roth Test Function

Amir Beck’s INTRODUCTION TO NONELINEAR OPTIMIZATION Theory, Algorithms, and Applications with MATLAB Excise 5.2 INTRODUCTION TO NONELINEAR OPTIMIZATION Theory, Algorithms, and Applications with MATLAB. Amir Beck. 2014 本文主要涉及题目(ii)的MATLAB部分&…

石正丽/周鹏团队发表冠状病毒新研究,进一步证明新冠非实验室泄漏

来源&#xff1a;中国生物技术网 新冠病毒SARS-CoV-2造成了近一个世纪以来最具破坏性的大流行COVID-19&#xff0c;而其中尚未解决的科学问题之一是这种病毒的自然来源。近日&#xff0c;来自中科院武汉病毒所、中国科学院大学的研究人员在预印本网站BioRxiv上提交了一篇论文&…

L1正则化降噪,对偶函数的构造,求解含L1正则项的优化问题,梯度投影法

L1正则化降噪&#xff0c;对偶函数的构造&#xff0c;求解含L1正则项的优化问题&#xff0c;梯度投影法 本文主要实现L1正则化降噪&#xff0c;L2 正则化降噪的文章在&#xff1a; https://blog.csdn.net/IYXUAN/article/details/121565229 原创文章&#xff01;转载需注明来源…

HBase之Table.put客户端流程(续)

上篇博文中已经谈到&#xff0c;有两个流程没有讲到。一个是MetaTableAccessor.getRegionLocations&#xff0c;另外一个是ConnectionImplementation.cacheLocation。这一节&#xff0c;就让我们单独来介绍这两个流程。首先让我们来到MetaTableAccessor.getRegionLocations。1.…

普华永道:AI规模化应用,基础知识先行

来源&#xff1a;Forbes作者&#xff1a;Cindy Gordon编译&#xff1a;科技行者人工智能&#xff08;AI&#xff09;是正在改变很多行业的游戏规则。据统计&#xff0c;人工智能有望为2030年的全球经济贡献高达15.7万亿美元&#xff0c;比中国和印度目前的产出之和还要多。其中…

ADMM,ISTA,FISTA算法步骤详解,MATLAB代码,求解LASSO优化问题

ADMM,ISTA,FISTA算法步骤详解&#xff0c;MATLAB代码&#xff0c;求解LASSO优化问题 原创文章&#xff01;转载需注明来源&#xff1a;©️ Sylvan Ding’s Blog ❤️ 实验目的 了解 ADMM, ISTA, FISTA 算法的基本原理、收敛性和复杂度&#xff1b;使用上述三种算法&#…

Spring详解(八)------事务管理

目录 1、事务介绍2、事务的四个特性&#xff08;ACID&#xff09;3、Spring 事务管理的核心接口4、 PlatformTransactionManager 事务管理器5、TransactionStatus 事务状态6、TransactionDefinition 基本事务属性的定义7、Spring 编程式事务和声明式事务的区别 8、不用事务…

A股光刻胶飙涨背后:仅一家可供应高端光刻胶

来源&#xff1a;芯师爷部分素材来源&#xff1a;前瞻产业研究院、华泰证券5月27日&#xff0c;半导体光刻胶概念股开盘即走强&#xff0c;截至收盘&#xff0c;A股光刻胶板块涨幅达6.48%。其中晶瑞股份、广信材料直线拉升大涨20%封涨停&#xff0c;容大感光大涨13.28%&#xf…

二〇二二注定是踔厉奋发、笃行不怠的一年

2021年&#xff0c;我在生活上、学习上、工作上都有着太多太多遗憾&#xff0c;很多想做的事、计划好的事并没有得到落实。但正如张宇老师所说&#xff0c;人生本来就是一段段幸福夹杂着不可避免的遗憾组成的&#xff0c;所取得的成绩远远大于遗憾&#xff0c;毕竟前途似海&…

为什么机器学习算法难以优化?一文详解算法优化内部机制

来源&#xff1a; 机器之心作者&#xff1a;JONAS DEGRAVE、IRA KORSHUNOVA编辑&#xff1a;小舟选自&#xff1a;engraved.blog损失线性组合是正确的选择吗&#xff1f;这篇文章或许能够给你答案。在机器学习中&#xff0c;损失的线性组合无处不在。虽然它们带有一些陷阱&…

论文作者串通抱团、威胁审稿人,ACM Fellow炮轰「同行评审」作弊

来源&#xff1a;机器之心编辑&#xff1a;陈萍、杜伟布朗大学计算机科学系教授、机器学习研究者、2018 年 ACM Fellow 迈克尔 利特曼&#xff08;Michael L. Littman&#xff09;在 ACM 通讯上发文斥责「部分学者正在威胁计算机科学研究的诚实性」。他在文章中指出了同行评审…

JDG人脸识别课堂管理系统全栈开发流程报告-软件工程实践报告

JDG人脸识别课堂管理系统全栈开发流程报告-软件工程 ⭐️ 本报告的代码部分和程序设计参考了 计算机18-1班张宇哲&#xff08;学号181002406&#xff09;同学 在Gitee仓库发布的AI-Attendance&#xff0c;本文档基于软件工程的具体流程&#xff0c;从软件工程的角度细化的张同学…

浅谈贝叶斯统计

来源&#xff1a;京师统计团总支学生会编辑&#xff1a; ∑Gemini浅谈贝叶斯统计贝叶斯统计是英国学者托马斯贝叶斯在《论有关机遇问题的求解》中提出一种归纳推理的理论&#xff0c;后被一些统计学者发展为一种系统的统计推断方法&#xff0c;称为贝叶斯方法。本文旨在通过实际…

浅析虚拟语气 (Subjunctive mood)

浅析虚拟语气 (Subjunctive mood) 本文旨在通过一种时序逻辑上的联系&#xff0c;帮助读者更好的记忆和运用虚拟语气。文中提及的概念不一定正确&#xff0c;但一定程度上能辅助记忆&#xff0c;最终达到熟练运用的目的。&#xff08;有些语法不用刨根问底&#xff0c;都是约定…