Vue.js 入门（一）——
文章目录
Vue.js 的概述
Vue.js 是一款轻量级的以数据驱动的渐进式JavaScript框架
Vue.js 数据驱动的原理在于View层的视图发生改变时，Vue会通过DOM Listeners来监听并改变Model层的数据。反之，当Model层的数据发生改变时，也会通过Data Bingings来监听并改变View层的展示，从而实现双向数据绑定的功能。
例如：jQuery通过操作DOM来改变页面的显示，而Vue通过操作数据实现页面的更新与展示。
MVVW概念
MVVW 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动传递给View, 即所谓的数据双向绑定
Vue.js 就是一个提供了MVVW风格的双向绑定的javascript库，专注于View层。它的核心是MVVW中的VM，就是ViewModel。ViewModel负责连接View和Model，保证视图和数据的一致性。
起步
下载vue并使用
<script src="https://unpkg.com/vue/dist/vue.js">
官网首先强调，Vue.js 的核心是一个允许你用简洁的模板语法来声明式的将数据渲染进DOM的系统
简单的htm结构，id 是 app
<div id = "app">
{{ message }}
</div>
声明vue对象
引入了 vue.js ，vue 会被注册为一个全局变量。在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
var app = new Vue ( {
el : " #app " ,
data : {
message : "Hello Ankry"
}
} ) ;
- el : Vue 需要操作的元素节点
- data : 每个Vue实例都会代理其对象里所有的属性。注意只有这些被代理的属性是响应的，如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
现在数据和 DOM 已经绑定在一起，所有的元素都是响应式的。在浏览器控制台修改 app, message，页面会相应更新
Vue 常用指令
指令带有前缀 v- , 以表示它们是 Vue.js 提供的特殊属性
1. v-text ( 更新元素的文本内容 )
- v-text 指令的作用是：设置标签的内容（textContent）
- 默认写法会替换全部内容，使用差值表达式可以替换指定内容
<span v-text="message"></span>
<span> {{message}} </span> // 两句效果相同
<h2> {{message+"!!"}} </h2>
2. v-html ( 更新元素的innerHTML )
- 注意内容按普通HTML插入，不会作为Vue模板进行编译
- 如果是HTML结构，则会被解析为标签
- v-text 指令无论内容是什么，只会解析为文本
<body>
<!-- html 结构 -->
<div id="app">
<h2 v-html="message"></h2>
<h2> {{message}} </h2> // 形成对比
</div>
<script type="text/javascript">
/* 创建Vue实例 */
var app = new Vue({
el:"#app",
data:{
message:"<a href='#'>Vue.js</a>",
}
});
</script>
</body>
3. v-on基础
- v-on 指令的作用：为元素绑定事件
- 事件名不需要写 on
<div id="app">
<input type="button" value="事件绑定" v-on:click="方法">
<input type="button" value="事件绑定" v-on:mouseenter="方法">
<input type="button" value="事件绑定" @dblclick="方法"> //简写
</div>
var app = new Vue({
el:"#app",
methods:{
方法:function(){
//逻辑
}
}
});
举个例子：
<button v-on:click="btn">BUTTON</button>
var app = new Vue ({
el:"#app",
data:{
message:"我是一个message",
},
methods:{
btn:function(){
alert('点我干嘛')
}
}
});
下面做一个实例
我们看一下这个实例的结构
两个button，中间一个span
点击左右button，中间的num会减小、增大
<div class="input-num">
<button @click="sub">-</button>
<span> {{num}} </span>
<button @click="add">+</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
sub:function(){
if (this.num > 0){
this.num--;
}else{
alert('我是有底线的');
}
},
add:function(){
if (this.num < 10){
this.num++;
}else{
alert('我已经到顶啦');
}
}
}
});
</script>
tips
- 创建Vue实例时，el (挂载点)，data (数据)，methods (方法)
- v-on 的作用是绑定事件，简写为 @
- 方法中通过 this，关键字获取 date 中的数据
- v-text指令的作用是：设置元素的 文本值，简写为 {{}}
4. v-show
- v-show：根据表达式的真假，切换元素的显示和隐藏
- 原理是修改元素的display, 实现显示隐藏
- v-show 指令后的内容，会被解析为布尔值
- 值为true元素显示，值为false元素隐藏
<body>
<!-- html 结构 -->
<div id="app">
<button @click="changeIsShow">切换显示状态</button>
<button @click="addAge">增加年龄</button>
<img src="images/pic03.png" alt="" v-show="isShow" width="200" height="200">
<img src="images/pic04.png" alt="" v-show="age>=18" width="200" height="200">
// v-show 指令后的内容，会被解析为**布尔值**
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
isShow:true,
age:16
},
methods : {
changeIsShow:function ( ) {
this.isShow = !this.isShow; // 改变状态
},
addAge:function ( ) {
this.age++;
}
}
});
</script>
</body>
5. v-if
- v-if = "表达式"
- 根据表达值的真假，切换元素的显示和隐藏
- 本质是 操作DOM元素 来切换显示状态
与 v-show 的区别
v-show : 自始至终都在，true / false 改变的是 display : block / none ; （操纵样式）
v-if : false 的时候，直接移除不存在了，该便签不会被渲染出来；（操纵DOM树）
如果频繁切换，需要用 v-show , 因为频繁操作DOM元素，对性能消耗比较大
6. v-bind
- 设置元素的属性 （比如：src , title , class）
- 完整写法：v-bind:属性名
- 简写直接省略v-bind，只保留 : 属性名
- 应用：class 来改变属性样式
<style type="text/css">
#box1{
width: 100px;
height: 100px;
border: 1px solid #000;
}
.blue{
background-color:skyblue;
}
</style>
</head>
<body>
<!-- html 结构 -->
<div id="app">
<div id="box1" :class="isBlue?'':'blue'"></div>
<button @click="toggleColor">改变颜色</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
isBlue:false
},
methods:{
toggleColor:function(){
this.isBlue =! this.isBlue
}
}
});
</script>
实例——图片切换
- 用数组保存多张图片
- 索引来存储当前数组的值
- v-bind 图片显示内容的更改，即改变图片的地址 src
- v-on 点击，事件绑定
- v-show 在第一张和最后一张，我们需要隐藏标签（左右按钮）
CSS部分
<style type="text/css">
*{
padding:0;
margin: 0;
}
#app{
margin: 100px auto;
width: 600px;
height: 300px;
position: relative;
}
#app a{
width: 45px;
height: 100px;
position: absolute;
top:50%;
margin-top: -50px;
vertical-align: middle;
opacity: 0.2;
}
#app a:hover{
opacity: 0.4;
}
#app a.left{
left: -45px;
text-align: left;
}
#app a.right{
right:-45px;
text-align: right;
}
.center{
width: 600px;
height: 300px;
display: block;
}
</style>
html部分
<div id="app">
<!-- 主图 -->
<img src="images/p1.jpg" alt="" class="center">
<!-- 左箭头 -->
<a href="#" class="left" >
<img src="images/prev.png" alt="">
</a>
<!-- 右箭头 -->
<a href="#" class="right" >
<img src="images/next.png" alt="">
</a>
</div>
- 定义图片数组 imgArr:[ ]
imgArr:[
"images/p1.jpg",
"images/p2.jpg",
"images/p3.jpg",
"images/p4.jpg",
"images/p5.jpg",
],
- 添加图片索引 index : 0
data : {
imgArr : [ ] ,
index : 0
} ,
- 在img绑定src属性
<img :src="imgArr[index]" alt="">
- 图片切换逻辑
methods : {
prev : function ( ) {
this.index--;
} ,
next : function ( ) { }
this.index++;
}
- 显示状态切换
<a href="#" @click="prev" v-show="条件">上一张</a>
<a href="#" @click="next" v-show="条件">下一张</a>
v-show 的条件就是：
- 第一张图片，左箭头消失。只要不是第一张，就有左箭头
v-show = "index!=0"- 最后一张图片，右箭头消失。只要不是最后一张，就有左箭头
v-show = "index<imgArr.length-1"
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
