vueJs的简单入门以及基础语法
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:clik="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:'第四个'}
]
}
})
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>
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...,用户可以自定义指令 官网
//这里定义v-focus
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
- bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
- update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
- componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind:只调用一次,指令与元素解绑时调用。
4)vue的扩展
4-1 v-bind根据条件绑定类名
案例 比如现在在true的情况下绑定red类名
<div id="app">
<span :class="{red:addClass}">{{msg}}</span> <!--可以利用简单的表达式-->
<!--这是v-bind指令可以省略-->
</div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:'条件绑定类名',
addClass:true
}
})
</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 说透点就是过滤你的数据根据你的条件进行过滤
//js
new Vue({
el:"#app",
data:{
list:[
{
title:'你好啊',
isChecked:true
},
{
title:'你好啊2',
isChecked:false
}
],
hash:'all' //过滤条件
},
computed:{ //重头戏
filterData(){
//这个根据你的条件进行过滤 记住这个函数最终返回的是数据需要return 数据出来 不需要调用此函数
let filterDatas = {
all(list){
return list
},
unfinshed(list){
return list.filter(function(item){
return !item.isChecked
})
},
finshed(list){
return list.filter(function(item){
return item.isChecked
})
}
}
return filterDatas[你的条件]?filterDatas[你的条件](this.list):this.list
//这里的你的条件可以使hash值 然后很久hash值的不同进行过滤 不需要调用这个函数
}
}
})
//然后在v-for的指令中
<div v-for="item in filterData"></div> <!--注意不是list了 而是刚刚的computed中的计算属性的函数名字-->
这里的hash的值可以参考我的另一片文章前端hash
6)vue的组件
6-1 底层学习组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
//html
<div id="app">
<my-test></my-test> <!--自定义标签-->
</div>
//js
Vue.component('my-test',{ //注册组件
template:'<div>初学组件</div>'
});
new Vue({
el:"#app"
})
6-2 父子组件通信
利用props进行传值
//局部组件
<div id="app">
<my-test msg="你好"></my-test>
<my-test msg="传值2"></my-test>
</div>
//js
new Vue({
el:"#app",
components:{
'my-test':{
props:['msg'],
template:'<div>{{msg}}</div>'
}
}
})
//全局组件
<div id="app">
<my-test msg="你好"></my-test>
<my-test msg="传值2"></my-test>
</div>
//js
Vue.component('my-test',{
props:['msg'],
template:'<div>{{msg}}</div>'
})
如果需要传的值在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=>{
//错误处理
})
}
})
vueJs的简单入门以及基础语法的更多相关文章
- Python入门篇-基础语法
Python入门篇-基础语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.编程基础 1>.程序 一组能让计算机识别和执行的指令. 程序 >.算法+ 数据结构= 程 ...
- python2.7入门---简介&基础语法
Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言,具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有比其他语言更有特色语法结构.基于上述原因, ...
- JavaScript快速入门-ECMAScript基础语法
一.JavaScript引入方式 1.行内式 <script> alert(123); </script> 2.外链式 <script src='custom.js'&g ...
- Python入门 —— 02基础语法
基础语法入门学习推荐: 简明 Python 教程 下文仅为入门推荐书籍的补充与重点 多行语句:末尾使用斜杠 ( ) ,将一行分为多行 var = item1 + item2 + item3 注释: ...
- Thymeleaf入门与基础语法
1.简介 Thymeleaf是用来开发Web和独立环境项目的现代服务器端Java模板引擎. Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 - HTML.可以在直接浏览器中正确显示 ...
- python3入门之基础语法
Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言.Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有比其他语言更有特色语法 ...
- 【Scala】新手入门,基础语法概览
目录 变量.常量和数据类型 var val 数据类型 条件表达式 块表达式 to循环 for循环 for推导式 scala中的方法和函数 方法的定义 函数的定义 函数和方法的区别 变量.常量和数据类型 ...
- Java零基础入门之基础语法
一.Java标识符 什么是标识符? 标识符是用来标识类名.对象名.变量名.方法名.数组名.自定义数据类型的有效字符序列. 合法的标识符 ①:由字母.数字.下划线"_".美元符号&q ...
- python3 入门 (一) 基础语法
1.编码问题 默认情况下,Python 3源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串. 也可以为源码文件指定不同的编码,在文件头部加上: # coding=gbk 2.关键字 ...
随机推荐
- http://www.bugku.com:Bugku——变量1(http://120.24.86.145:8004/index1.php)
之前立志做出需要编码解决和时间相关的那道CTF题目,但是这次没找到,相关人士找到了麻烦告诉我一声.本次再学习一下子关于正则表达式和PHP的相关知识.开课咯-.- 刚看题目就发现提示, ...
- linux命令学习之:ls
ls命令用来显示目标列表,在Linux中是使用率较高的命令.ls命令的输出信息可以进行彩色加亮显示,以分区不同类型的文件.语法 ls(选项)(参数) 选项说明 -a:显示所有档案及目录(ls内定将档案 ...
- php解析优酷网上的视频资源去广告
1.过程原理解析: 一.准备工作 所谓工欲善其事必先利其器,做好破解的准备工作会令你事半功倍. 1.首先准备一个Http抓包工具,PC上推荐Fiddler或者Postman,iOS上推荐Surge 2 ...
- 42-2017蓝桥杯b java
1.购物单 小明刚刚找到工作,老板人很好,只是老板夫人很爱购物.老板忙的时候经常让小明帮忙到商场代为购物.小明很厌烦,但又不好推辞. 这不,XX大促销又来了!老板夫人开出了长长的购物单,都 ...
- golang 创建一个简单的资源池,重用资源,减少GC负担
package main; import ( "sync" "errors" "fmt" ) //代码参考<Go语言实战>中第7 ...
- gearman中worker常驻后台,导致MySQL server has gone away
产生这个原因主要有如下几点: 1.mysql服务宕机了 2.长时间没有操作,超过了wait_timeout的设置,mysql自动断开 3.mysql请求链接被主动kill 4.发送的请求或返回结果过大 ...
- gearman管理工具GearmanManager的安装与使用
一.gearman自带了一个gearadmin工具 查看帮助信息 > gearadmin --help 查看状态 > gearadmin --status 查看worker信息 > ...
- Vue 安装脚手架 工具 vue-cli (最新)
假如您安装过旧版脚手架工具(vue-cli),您可以通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli卸载. Vue CLI 需要Node ...
- c++ opencv 3.2 +Mfc VS2015窗体显示图片方法
本文仅涉及一些核心步骤,具体 OpenCV 的配置以及其他的细节问题,请参考 VS2010 / MFC + OpenCV 2.4.1打开图片. 1. 新建 MFC 对话框项目 基于对话框,不使用Uni ...
- PAT 1063 计算谱半径(20)(代码)
1063 计算谱半径(20 分) 在数学中,矩阵的"谱半径"是指其特征值的模集合的上确界.换言之,对于给定的 n 个复数空间的特征值 { a1+b1i,⋯,an+ ...