前言
写此文章的目的主要是为了记录一下自己的学习过程便于日后用来查漏补缺
也希望能够帮助到一部分,如果在浏览的过程中您发现了错误希望您的及时帮忙改正，在此感谢！
vue的基本语法
本文是基于vue.js的方法来记录,首先做的是创建一个js文件夹，引入vue.js文件,点此下载(提取码:tfgn)
一、vue实例
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue实例</title>
</head>
<body>
<div id="app">
<!-- vm 实例绑定的标签 -->
</div>
</body>
<!-- 引入vue.js文件 -->
<script src="../js/vue.js"></script>
<script>
// 声明一个vue实例，vue的使用鼓励使用数据处理,不提倡操作dom
var vm = new Vue({
el:"#app", //el 挂载点,让vue实例接管着标签,与id为app的元素做绑定,也就是用此实例在#app内部生效
data:{ //data vue里存放数据的地方,咱们先从data说起。
}
})
</script>
</html>
二、v-text与v-html和插值表达式{{ }}
将这三个放在一块是因为功能相似，容易分清不同的地方
先来看一个运行结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edg">
<title>v-text与v-html和插值表达式{{ }}</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--
相同点:
v-text与v-html和{{}} 都是msg也就是data数据的内容。
从结果中我们不难看出:
v-html:是以html的形式展示数据相当于innerHtml
v-text与{{}}:以文本的形式展现数据.
所以说 v-text== {{}} 吗?,显然不是,我们可以看到三个div中都存在
默认值,v-text与v-html的默认内容都没有显示,只有{{}}存在默认内容
总结:在原有元素内存在默认值得情况下 v-text与v-html是替换标签内的内容,而{{}}则是进行拼接操作
-->
<div v-text="msg">====</div>
<div> {{msg }} =====</div>
<div v-html="msg">====</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"<h1> 我是 h1 </h1>"
}
})
</script>
</html>
三、v-if与v-show
看运行结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edg">
<title>v-if与v-show</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--
v-if与v-show是根据boolean来判定要不要展示该元素
当为true时他两没有多大的区别,但是当判断为false时
v-if是将该元素移除,而v-show则是通过css样式dispaly:none
来选择隐藏起来.
当然他们都支持js表达式例如 v-if="1==1" 这样也是可以的。
-->
<div v-if="flag">显示v-if</div>
<div v-show="flag">显示v-show</div>
<div v-if="!flag">隐藏v-if</div>
<div v-show="!flag">隐藏v-show</div>
<div v-show ="1==1">cccc</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
</html>
四、v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edg">
<title>v-bind</title>
<script src="../js/vue.js"></script>
</head>
<style>
.red{
color:#0a99ff;
}
.thin{
font-weight: 200;
}
.italic{
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
<body>
<div id="app">
<!--
v-bind 是用来绑定元素属性。
一般用来动态的绑定class和style
v-bind是可以简写为 :
例如 v-bind:value 等同于 :value
-->
<!-- 我们先来看看绑定class -->
<!-- 先看看不使用vue的写法 -->
<h1 class="red thin italic">茕茕孑立沆瀣一气踽踽独行醍醐灌顶</h1>
<!-- 第一种写法 可以传递一个数组 -->
<h1 v-bind:class="['red','thin','italic']">茕茕孑立沆瀣一气踽踽独行醍醐灌顶</h1>
<!-- 第二种写法 数组中使用三元表达式 -->
<h1 v-bind:class="['red','thin',flag ? 'active':'']">茕茕孑立沆瀣一气踽踽独行醍醐灌顶</h1>
<!-- 第三中写法 在数组中使用对象代替三元表达式-->
<h1 v-bind:class="['red','thin',{'active':flag}]">茕茕孑立沆瀣一气踽踽独行醍醐灌顶</h1>
<!-- 注意的是在为class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号 -->
<h1 v-bind:class="classObj">茕茕孑立沆瀣一气踽踽独行醍醐灌顶</h1>
<!-- 绑定style -->
<h1 v-bind:style="[styleObj1,styleObj2]">茕茕孑立沆瀣一气踽踽独行醍醐灌顶</h1>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true,
classObj: {'red':true, thin:true, italic:false,active:false},
styleObj1:{color:'red', 'font-weight':200},
styleObj2:{'font-style':'italic'}
},
})
</script>
</html>
五、v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edg">
<title>v-bind</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ msg }}</h1>
<!--
将v-bind与v-model放一块作比较，因为他们都是属性绑定的,
但是不同的是v-bind只能是单项绑定而v-model是双向绑定的
也就是说id1只能接收msg的数据,而id2可以接收到msg的数据
也能将数据传输到msg。
--改变id2输入框中的内容 <h1>标签中的插值表达式的值也会动态改变
需注意的是 v-model只能作用表单元素
-->
<input v-bind:value="msg" type="text" id="1"/>
<br><br>
<input v-model:value="msg" type="text" id="2"/>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"茕茕孑立沆瀣一气"
},
})
</script>
</html>
六、v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edg">
<title>v-bind</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--
v-for 循环
循环遍历数据类似于for循环
-->
<p v-for="item in list">{{item.id}}------{{item.name}}</p>
<!-- 遍历对象的时候除了遍历对象key和value,还有个一个参数索引,
参数索引的值是从0开始
在这我使用index声明.(item,index)中的item和index声明是任意的，
list就是你要遍历的的data中的对象
-->
<p v-for="(item,index) in list">{{item.id}}------{{item.name}}---------{{index}}---{{i}}</p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
list:[
{id:1,name:'zs1'},
{id:2,name:'zs2'},
{id:3,name:'zs3'},
{id:4,name:'zs4'}
],
},
})
</script>
</html>
七、v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edg">
<title>v-bind</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<!--
v-on:绑定事件
简写 @ 例如 v-on:click == @click
触发自定义的函数 函数方法定义写在methods内部
methods与data平级
一般情况下我们可以写成v-on:click="btn"
但是如果data数据中存在与的函数名相同的变量名
我们就需要使用v-on:click="btn()"
-->
<p href="" v-on:click="btn" >点击事件</p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"hello",
btn:''
},
methods: {
// 函数有两种如下两种定义方法,推荐第一种
btn(){
this.msg='触发了事件绑定!'
},
btn: function(){
this.msg = '第二种定义'
}
},
})
</script>
</html>
