Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一 方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。
参考官网:https://cn.vuejs.org/v2/guide/
vue.js是一个MVVM的框架,理解MVVM有利于学习vue.js。 MVVM拆分解释为:
MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离,使各自的职责更加清晰,后期代码维护更加简单
vue.min.js
(Vue.js的类库)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js测试程序</title>
<script src="vue.min.js"></script>
</head>
<body>
<!--实现在body区域内显示一个申来来的名称-->
<div id="app">
{{name}} <!--相当于MVVM的view视图-->
</div>
</body>
<script>
// 编写MVVM中的model部分及VM(ViewModel)部分
var VM = new Vue({
el:'#app', // vm接管了app区域的管理
data:{ // model数据
name:'问了么'
}
});
</script>
</html>
运行结果:浏览器显示 问了么
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js常用指令的测试</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num1" >+
<input type="text" v-model="num2">=
{{Number.parseInt(num1)+Number.parseInt(num2)}}
<button >计算</button>
</div>
</body>
<script>
// 编写MVVM中的model部分及VM(ViewModel)部分
var VM = new Vue({
el:'#app', // vm接管了app区域的管理
data:{ // model数据
num1:1,
num2:1,
}
});
</script>
</html>
(1) 在表单控件或者组件上创建双向绑定
(2) v-model仅能在如下元素中使用:
上面的代码,网速慢,未先加载Vue类库的时候,会出现插值闪烁的问题
用v-text
<span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>
即可解决
ps: 解决插值表达式闪烁问题,使用v-text v-text可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js常用指令的测试</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num1" >+
<input type="text" v-model="num2">=
<span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>
<button v-on:click="change">计算</button>
</div>
</body>
<script>
// 编写MVVM中的model部分及VM(ViewModel)部分
var VM = new Vue({
el:'#app', // vm接管了app区域的管理
data:{ // model数据
num1:0,
num2:0,
result:0
},
methods:{
change:function () {
this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)
alert("结果等于"+this.result)
}
}
});
</script>
</html>
1、作用: v‐bind可以将数据对象绑定在dom的任意属性中。 v‐bind可以给dom对象绑定一个或多个特性,例如动态绑定style和class
2、举例: <img v‐bind:src="imageSrc"> <div v‐bind:style="{ fontSize: size + 'px' }"></div>
3、缩写形式 <img :src="imageSrc"> <div :style="{ fontSize: size + 'px' }"></div>
贴代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js常用指令的测试</title>
<script src="vue.min.js"></script>
</head>
<body>
<!--实现在body区域内显示一个申来来的名称-->
<div id="app">
<a :href="url">v_bind测试</a>
<a v-bind:href="url">v_bind测试</a>
<div :style="{ fontSize: size + 'px' }">问了么</div>
<div v-bind:style="{ fontSize: size + 'px' }">问了么</div>
</div>
</body>
<script>
// 编写MVVM中的model部分及VM(ViewModel)部分
var VM = new Vue({
el:'#app', // vm接管了app区域的管理
data:{ // model数据
url:"http://java3.cn/",
size:33
}
});
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js常用指令的测试</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<!--遍历list数组-->
<li v-for="(item,index) in list":key="index" >数组的下标为:{{index}}--内容:{{item}}</li>
</br>
<!--只显示下标为偶数的-->
<li v-for="(item,index) in list":key="index" v-if="index %2 == 0">数组的下标为:{{index}}--内容:{{item}}</li>
</br>
<!--遍历JSON-->
<li v-for="(value,key) in user":key="key"> {{key}}--{{value}}</li>
</br>
<!--遍历userlist集合-->
<li v-for="(item,index) in userlist":key="item.user.uname">
下标:{{index}}--{{item.user.uname}}--{{item.user.age}}
</li>
</br>
<!---->
<li v-for="(item,index) in userlist":key="item.user.uname">
<div v-if="item.user.uname=='问了么'" style="color: #00a0e9">
{{index}}--{{item.user.uname}}--{{item.user.age}}
</div>
<div v-else>
{{index}}--{{item.user.uname}}--{{item.user.age}}
</div>
</li>
</ul>
</div>
</body>
<script>
// 编写MVVM中的model部分及VM(ViewModel)部分
var VM = new Vue({
el:'#app', // vm接管了app区域的管理
data:{ // model数据
list:[1,2,3,4,5],
user:{uname:"问了么",age:1},
userlist:[
{user:{uname:'问了么',age:19}},
{user:{uname:'问答社区',age:19}}
]
}
});
</script>
</html>
显示效果: