-
Vue入门案例
-
模板语法
-
v-text和v-html指令
-
v-bind指令
-
事件的绑定
-
表单数据的绑定
-
v-clock指令
-
v-pre指令
-
图片的切换
-
反转字符串
-
计算属性最基础的例子
-
计算属性的例子
1.Vue介绍
Vue 官网：https://cn.vuejs.org/
渐进式JavaScript框架
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2.Vue入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue库文件 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<button type="button" @click="show()">一个按钮</button>
<!-- {{}} 这语法是vue 提供的 -->
<h1>{{msg}}</h1>
</div>
</body>
<script type="text/javascript">
var obj = {
//vue控制的区域
el: '#box',
//vue管理的数据，现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。数据一变化，视图会自动刷新
data: {
msg: 'Hello Vue'
},
methods: {
show: function() {
alert("呵呵")
}
}
}
var app = new Vue(obj);
/* 注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #box) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。 */
</script>
</html>
3.模板语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<h1>{{msg}}</h1>
<!-- {{}} 支持运算符 -->
<h1>{{num+100>100}}</h1>
<!-- {{}} 支持三元运算符 -->
<h1>{{flag==true?'等于':'不等于'}}</h1>
<!-- {{}} 支持调用js的方法,这个方法要有返回值 -->
<h1>{{str.toUpperCase().split('').reverse().join("")}}</h1>
<!-- 但是，我们一般情况，不在{{}} 里做逻辑运算，以及调用 方法，我我们大多数情况下，只是把数据展示出来 -->
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'Hello',
num:66,
flag:true,
str:'hello'
}
})
</script>
</html>
4.v-text和v-html指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 指令：就是vue提供的一个行间属性，可以把一些行为，应用到这个元素上，vue提供的行间指令都是以v-开头，你要做的就是记住这个指令，是干啥的
你会发现，我们使用vue基本上，不用我们去操作DOM 我们只关心数据和视图，数据一变化，视图就会自动更新。
视图变化也会引起数据的变化。
-->
<h1>{{msg}}</h1>
<h1 v-text="str"></h1>
<h1 v-text="username"></h1>
<!-- 会转义html标签 -->
<h1 v-html="username"></h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
str:'hehe',
username:"<u style='color:red'>张三</u>"
}
})
</script>
</html>
5.v-bind指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<img src="img/u11251389372721875248fm26gp0.jpg" >
<a href="https://www.163.com">进入网易</a>
<!-- v-bind 可以绑定标签自带的属性，标签属性属性的值，可以交由vue管理 -->
<img v-bind:src="imgUrl" @click="changeImage()">
<a v-bind:href="url">进入网易</a>
<!-- v-bind 指令可以简写 :-->
<img :src="imgUrl" >
<a :href="url">进入网易</a>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
imgUrl:'img/u11251389372721875248fm26gp0.jpg',
url:'https://www.163.com'
},
methods:{
/* changeImage:function(){
} */
//es6 新语法
changeImage(){
//this 代表的是vue实例
this.imgUrl="img/a.jpg"
}
}
})
</script>
</html>
6.事件的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- v-on:事件名=处理函数 -->
<button type="button" v-on:click="show()">一个按钮</button>
<button type="button" v-on:click="test(100,msg)">一个按钮2</button>
<!-- v-on指令可以简写 @事件名=处理函数 -->
<button type="button" @click="suibian()">一个按钮3333</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
},
//vue所管理的函数
methods:{
show:function(){
alert("hello");
},
//es6新语法
test(num,m){
alert("hehe"+num+m);
},
suibian(){
alert(this.msg);
}
}
})
</script>
</html>
7.表单数据的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<input type="text" name="" id="" value="hello" />
<input type="text" name="" id="" :value="msg" />
<br>
<!-- 对于 表单项的数据绑定，我们采用v-model 这个指令来绑定数据 -->
<!-- 视图和数据的双向绑定，数据变化，视图自动变化，视图变化也会引起数据的变化。 -->
<input type="text" name="" id="" value="" v-model="str" />
<h1>{{str}}</h1>
<input type="text" name="" id="" value="" v-model="str" />
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
str:'HaHa'
}
})
</script>
</html>
8.v-clock指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<h1 v-cloak>{{msg}}</h1>
</div>
</body>
<script type="text/javascript">
//alert("abc")
new Vue({
el: '#box',
data: {
msg: 'hello'
}
})
</script>
</html>
9.v-pre指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- v-pre 不解析模板语法，保持原有的内容 -->
<h1 v-pre>{{msg}}</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
}
})
</script>
</html>
10.图片的切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<img v-bind:src="imgUrl" >
<button type="button" @click="kaiguan2(flag=!flag)">开关</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
imgUrl:'img/pic_bulboff.gif',
flag:false
},
methods:{
kaiguan(){
//this 代表的是vue实例
if(this.flag){
this.imgUrl="img/pic_bulbon.gif"
}else{
this.imgUrl="img/pic_bulboff.gif"
}
//修改标记
this.flag=!this.flag;
},
kaiguan2(f){
if(f){
this.imgUrl="img/pic_bulbon.gif"
}else{
this.imgUrl="img/pic_bulboff.gif"
}
}
}
})
</script>
</html>
11.反转字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 我们觉得你{{}} 模板里面调用方法，阅读性不好，如果说逻辑再复杂写，还写不出来了-->
<h1>{{msg.split('').reverse().join('')}}</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
}
})
</script>
</html>
12.计算属性最基础的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 我们觉得你{{}} 模板里面调用方法，阅读性不好，如果说逻辑再复杂写，还写不出来了-->
<h1>{{msg.split('').reverse().join('')}}</h1>
<h1>{{reverseMsg}}</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello'
},
//计算算属性
computed:{
//reverseMsg这个属性的值，是通过对msg这个属性进行逻辑操作得来的
reverseMsg:function(){
//反转 msg 返回
var text=this.msg.split('').reverse().join('');
return text;
}
}
})
</script>
</html>
13.计算属性的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
你的姓： <input type="text" name="" id="" value="" v-model="xing" />
<br>
你的名：<input type="text" name="" id="" value="" v-model="ming" />
<br>
<!-- 全名：<input type="text" name="" id="" value="" v-model="xing.concat(' ').concat(ming)" /> -->
全名：<input type="text" name="" id="" value="" v-model="fullname" />
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'hello',
xing:'',
ming:'',
},
computed:{
fullname:function(){
//第一次初始化会调用一次
//计算属性从语法概念上来说不难，难的是你在做需求时，你想不起来要用这个计算属性这个概念
console.log("fullname第一次初始化会调用一次")
console.log("你使用的其他属性比如xing和ming的值一变化fullname就会调用")
return this.xing.concat(' ').concat(this.ming)
}
}
})
</script>
</html>
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
