一、vue的数据绑定和基本使用
在dom里使用插值表达式来进行显示：就是这个符号 { { } } 。
建个文件夹 里面放入Vue.js文件
然后src引用
创建一个div吧
<div id="app">
<p>
{{mes}}
</p>
<p>
{{"我是插值表达式"+mes}}
</p>
<p>
{{num+50}}
</p>
{{i? "是true":"是false"}}
</div>
插值表达式里怎样命名都可以
然后写个js
引入一个Vue类 创建一个Vue对象
let vn=new Vue({
el:"#app",//在哪个dom id名中进行生效
data:{
mes:"hello world",
num:20,
i:true
}
})
然后浏览器输出一下
{{mes}} = hello world
{{“我是插值表达式”+mes}} = 我是插值表达式hello world
{{num+50}} = 70
{{i? “是true”:“是false”}} = 是true
插值表达式里可以拼接什么的都可以。
二、v-on 事件绑定
事件绑定 v-on
v-on 可以简写为@
例如给button添加一个点击事件
<div id="app">
<p>{{num}}</p>
<button @click="add()">+</button>
</div>
let vn=new Vue({
el:"#app",
data:{
num:2
},
methods:{
add(index){
this.num++
}
)}
然后点击button 然后原本num=2
dom会显示3、4、5，依次类推，另外add() 括号里也可以填值 点击就会显示 add(10) dom就会输出10。
阻止默认事件 .prevent
阻止事件冒泡 .stop
例如 .prevent 阻止a标签默认跳转事件发生
<a href="http://www.baidu.com" @click.prevent="add(10)">+</a>
这样点击a标签就不会跳转了。
再例如 .stop 就可以阻止事件冒泡 点击span不触发父元素标签
<p @click="fun()">
<span @click.stop="fun1()">hello</span> world
</p>
let vn=new Vue({
el:"#app",
data:{
num:1
},
methods:{
fun(){
console.log("p标签的点击事件")
},
fun1(){
console.log("span标签的点击事件")
}
}
})
如果上面不添加 .stop的话 点击span标签就会先触发父元素p标签然后再触发自己的。
三、v-html 和 v-text 数据显示的绑定
（好像用处不大）
v-html和v-text
<div id="app">
<p>
{{text}}
</p>
<p v-html="text">
</p>
<p v-text="text">
</p>
</div>
<script type="text/javascript">
let vn=new Vue({
el:"#app",
data:{
text:"<a href='a.html'>hello world</a>"
}
})
</script>
害！就是用v-html可以显示a标签 也就就牛逼一点。效果自己打开浏览器输出一下吧。
四、v-bind 数据绑定
v-bind
由数据来进行对应的属性操作 通过改变数据进行对应的属性的改变 v-bind 该属性由data的数据来决定
使用数据决定当前标签的字号大小，Vue也提供了对应的简写方式 把v-bind: 改成 : 。
例如下面代码密码可见与不可见改变type的属性：
点击button标签触发changeType()事件
<div id="app">
<p>
<input :type="type">
</p>
<button @click="changeType()">密码可见</button>
</div>
<script type="text/javascript">
let vn=new Vue({
el:"#app",
data:{
type:"password",
},
methods:{
changeType(){
this.type=this.type=="text"?"password":"text"
}
}
})
</script>
再比如点击字体变大
<style type="text/css">
.red{
color: red;
}
.blue{
color: blue;
}
</style>
<div id="app">
<p :style="{fontSize:size+'px',color:color}">
hello world
</p>
<button @click="changeType()">点击变大</button>
</div>
<script type="text/javascript">
let vn=new Vue({
el:"#app",
data:{
size:50,
color:"blue",
},
methods:{
changeType(){
this.size++
}
}
})
</script>
再一个就是改变属性名字：
<style type="text/css">
.red{
color: red;
}
.blue{
color: blue;
}
</style>
<div id="app">
<p :class="{red:size==50}">
hello world
</p>
<p :class="[i?'red':'blue']">
hello world
</p>
</div>
<script type="text/javascript">
let vn=new Vue({
el:"#app",
data:{
size:50, //更改这两个结果 p标签的class会变
i:true,
},
})
</script>
上面的应该懂了吧？ 要是没懂也没事，反正我懂就行。
五、v-model 双向的数据绑定
v-model
v-model 是什么 v-model 就是 vue 的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。 二，为什么使用 v-model v-model 作为双向绑定指令也是 vue 两大核心功能之一，使用非常方便，提高前端开发效率。
例如下代码：
<div id="app">
<p>
<input type="text" v-model="text">
</p>
{{text}}
</div>
<script type="text/javascript">
let vn=new Vue({
el:"#app",
data:{
text:"hello world",
}
})
</script>
上面在input框里输入内容 下面的{{text}} 会同步内容
再举个栗子：当前方复选框选中时 后方颜色变成选中颜色 如果取消选中则改为默认颜色
<style type="text/css">
.hs{
color: red;
}
</style>
<div id="app">
<p :class="{hs:i}">
<input type="checkbox" v-model="i">点击前面的复选框变色色
</p>
{{i}} <!-- 看一下i输出什么 -->
</div>
<script type="text/javascript">
let vn=new Vue({
el:"#app",
data:{
i:false
}
})
</script>
六、v-if 控制元素的显示和隐藏
v-if
v-if 指令用于判断元素的显示和隐藏 它是刷新的时候直接删除元素的
就像if语句 为true就怎样 为false就不怎样
<div id="app">
<div v-if="isLogin">我是登录成功</div>
<div v-else>我是未登录</div>
</div>
<script type="text/javascript">
let vn=new Vue({
el:"#app",
data:{
isLogin:true,
},
})
</script>
还有一个 v-show 也用于控制元素的显示和隐藏 是display属性控制
v-show: 当条件为false时，v-show只是给我们的元素添加一个行内样式：display:none
<div v-show="isLogin">我是登录成功</div>
v-if和v-show的区别
v-if
1、v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
2、v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show
1、v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
总结：
相同点：
1、v-if 与 v-show 都可以动态控制 DOM 元素的显示隐藏。
不同点：
1、v-if 有更高的切换开销，v-show 有更高的初始渲染开销
3、v-if 适合运营条件不大可能改变；v-show 适合频繁切换。
4、v-if 通过动态向DOM树增删DOM元素，v-show 设置display来进行隐藏
5、v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show 只是简单的基于 CSS 切换；
如果需要非常频繁地切换，则使用v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
来个小栗子：
列3个li 给每个li先添加点击事件，点击哪个li 那么里面的fun就把它的值赋给div
然后再写三个div 里面用上v-if属性 div是几 那就显示几。
最后再给li一个 数据绑定 如果div相等 那就加上css样式
<style type="text/css">
.hs{
color: red;
}
</style>
<div id="app">
<ul>
<li @click="fun(1)" :class="{hs:div==1}">陈奕迅</li> <!-- div等于几谁就变色 -->
<li @click="fun(2)" :class="{hs:div==2}">杨千嬅</li>
<li @click="fun(3)" :class="{hs:div==3}">李克勤</li>
</ul>
<!-- div等于几就显示几 -->
<div v-if="div==1">陈奕迅（Eason Chan）华语流行乐男歌手、演员、作曲人</div>
<div v-if="div==2">杨千嬅（Miriam Yeung）中国香港流行乐女歌手、影视演员</div>
<div v-if="div==3">李克勤（Hacken Lee）华语流行乐男歌手、演员、主持人、作词人。</div>
</div>
<script type="text/javascript">
let vn=new Vue({
el:"#app",
data:{
div:1
},
methods:{
fun(index){
this.div=index //点击事件点击谁就把谁的值赋给div
}
}
})
</script>
七、v-for 循环遍历
(这个还挺重要的 毕竟能用到的地方很多)
v-for 遍历结构
使用v-for将对应的数据直接遍历成相关的结构
将数组中的内容 遍历产生标签 每一个p标签的内容改成数组中的内容
首先格式是这样的 ：
<p v-for="(item,index) in lists" :key="index">
{{index}} {{item.数据名}} {{item.数据名}}
</p>
item 第一个对应数组中的元素
index 第二个对应数组中元素的索引值，这两个名字随便取
vue在语法环境中 使用dom操作 每个dom对于vue来说都是一样的
每次循环一定要给元素绑定 key 属性 用于vue内部做元素区分
在vue2.0阶段 循环不写key可以 但是3.0的时候不行 会警告或者报错
下面就来段代码演示一下：
<div id="app">
<p v-for="(item,index) in lists" :key="index">
序号:{{index}}-书名:《{{item.name}}》-作者:{{item.author}}
</p>
</div>
<script type="text/javascript">
let vn=new Vue({
el:"#app",
data:{
lists:[
{name:"三国演义",author:"罗贯中"},
{name:"红楼梦",author:"曹雪芹"},
{name:"水浒传",author:"施耐庵"},
{name:"西游记",author:"吴承恩"},
],
}
})
</script>
下面是效果:
然后再举一个栗子,就是99乘法表，这是个循环嵌套遍历
<div id="app">
<p v-for="(item,index) in numbers" :key="index">
<span v-for="(a,b) in numbers" :key="b" v-if="a<=item">
({{item}} * {{a}} = {{item*a}})
</span>
</p>
</div>
<script type="text/javascript">
let vn=new Vue({
el:"#app",
data:{
numbers:[1,2,3,4,5,6,7,8,9]
}
})
</script>
效果如下：
ok 今天先说这七个，下次接着更新。
扫一扫
2636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
