Vue.js初级
2019-09-25 本文已影响0人
磨陀货_
1.Vue.js表达式
1.1 基本表达式语法
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<div id="app">
<!--简单表达式 [类型一样直接加]=25-->
<h1>{{5+5}}</h1>
<!-- +:运算，字符串连接 【类型不一样就是拼接】=5v5,55-->
<h1>{{5+"v5"}}</h1>
<h1>{{5+"5"}}</h1>
<!-- -：减法 "5"-"5" 两个双引号 自动解析【类型一样直接算】=0,25-->
<h1>{{"5"-"5"}}</h1>
<h1>{{5*5}}</h1>
<!-- *:乘 【一样类型一样直接乘】=25-->
<h1>{{"5"*"5"}}</h1>
<!-- / 除 【不说了一样】=1,1-->
<h1>{{5/5}}</h1>
<h1>{{"5"/"5"}}</h1>
</div>
</body>
<script>
var app = new Vue({
el:"#app"//挂载到id
});
</script>
1.2 三目操作
<script src="../node_modules/vue/dist/vue.min.js"></script>
<body>
<div class="app">
{{show?"GG":"MM"}}
</div>
</body>
<script>
var app = new Vue({
el:".app",
data:{
show:true//true就是MM，false就是GG
}
});
</script>
</html>
1.3 字符串操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
{{message}}<br>
<!--长度-->
{{message.length}}<br>
<!--截取根据下标-->
{{message.substring(0,3)}}
<!--根据下标从哪里开始 【3456】-->
{{message.substring(2).toUpperCase()}}<br>
<!--获取到下标 【3】-->
{{message.charAt(2)}}
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
message:"123456"
}
});
</script>
</html>
1.4 对象操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--123456-->
{{message}}<br>
<!--{ "name": "华雄", "age": 69 }重写toString，就变了-->
{{user}}<br>
<!--华雄-->
{{user.name}}<br>
<!--getName(){return this.name}-->
{{user.getName}}<br>
<!--toString(){return this.name}-->
{{user.toString}}<br>
<!--{"name":"华雄","age":69} -->
{{JSON.stringify(user)}}
<!--22 json转成字符串了-->
{{JSON.stringify(user).length}}
</div>
</body>
<script>
var sss={
name:"华雄",
age:69,
getName(){return this.name},//{ "name": "华雄", "age": 69 }
//原toString---function toString() { [native code] }
toString(){return this.name}//重写toString，这样获取到就是华雄
}
var app = new Vue({
el:"#app",
data:{
message:"123456",
user:sss
}
});
</script>
</html>
1.5 数组操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
{{woman}}<br>
{{woman[0]}}<br>
{{woman.length}}<br>
{{woman.toString()}}<br>
{{woman.join(" + ")}}
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
woman:["黄月英","蔡文姬","孙尚香","甄宓"]
}
});
</script>
</html>
2.Vue.js指令
v-text 文本展示 v-html 变大变粗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--纯文本 是什么样就展示什么-->
<span v-text="msg"></span><br>
<!--解析标签 会自动解析标签-->
<span v-html="msg"></span>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
msg:"<h3>你好！中国</h3>"
}
})
</script>
v-for 循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--就是直接循环-->
<ul>
<li v-for="a in woman">{{a}}</li>
</ul>
<!--循环a和下标index-->
<ul>
<li v-for="(a,index) in woman">{{a}}---{{index}}</li>
</ul>
<!--搞一个表-->
<table border="1px black">
<!--表头-->
<tr>
<th>名字</th>
<th>年龄</th>
</tr>
<!--循环里面的东西-->
<tr v-for="key in users">
<!--
aa in key aa：value值
aa,bb in key aa:value值 bb:属性名
aa,bb,index,index aa:value值 bb:属性名 index:下标
-->
<td v-for="(aa,bb,index) in key">
{{aa}}----{{bb}}---{{index+1}}
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
woman:["黄月英","蔡文姬","孙尚香","甄宓"],
<!--List<user>-->
users:[{
name:"张三",
age:10
},{
name:"李四",
age:20
}]
}
})
</script>
v-bind 绑定图片，图片可以写活，不用写死
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--原版以前这么写-->
<img src="123456.JPG" title="">
<!--新版 可以实现绑定，这样就能写活了-->
<img v-bind:src="src" v-bind:title="sss">
<!--title就是鼠标提示-->
<img :src="src" v-bind:title="sss">
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
//下面的值现在是写死，以后从后台获取。
src:"123456.JPG",
sss:"手放哪呢？"
}
});
</script>
</html>
v-model 绑定输入框（双向绑定）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<!--这个都是一些双向绑定的案例，不好解释，太麻烦了！需要的时候代码考过去自己一看就明白了了-->
<body>
<div id="app">
<h3>绑定到type=text的input表单元素</h3>
姓名:<input type="text" v-model="inputValue"><br/>
data中的值:{{inputValue}}
<h3>绑定到type=checkbox的input表单元素</h3>
<!--v-model="checkboxValue" checkboxValue数组包含了当前value值 就会默认选中-->
打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
data中的值:{{checkboxValue}}
<h3>绑定到type=radio的input表单元素</h3>
男:<input type="radio" v-model="radioValue" value="男"><br/>
女:<input type="radio" v-model="radioValue" value="女"><br/>
data中的值:{{radioValue}}
<h3>绑定到textarea的元素</h3>
个人简介:<textarea v-model="textareaValue"></textarea><br/>
data中的值:{{textareaValue}}
<h3>绑定到单选的select的元素</h3>
技能:<select v-model="skills">
<option value="java">java</option>
<option value="php">php</option>
<option value=".net">.net</option>
</select><br/>
data中的值:{{skills}}
</div>
</body>
<script>
var vue = new Vue({
el:"#app",
data:{
inputValue:"输入框的值",
checkboxValue:["打篮球"],
radioValue:"女",
textareaValue:"文本域的值",
skills:"php"
}
});
</script>
</html>
v-show true显示==false不显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<span v-show="show">显示</span><br>
<span v-show="hidden">不显示</span><br>
<span v-show="score<60">小于60分显示</span><br>
<span v-show="score>60">大于60分显示</span>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
show:true,
hidden:false,
score:59
}
});
</script>
</html>
v-if v-else v-else-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--true-->
<spen v-if="show">沙沙沙</spen>
<spen v-else-if="show">啊啊啊</spen>
<!--true-->
<spen v-if="hidden">啧啧啧</spen>
<!--false-->
<spen v-else="hidden">呦呦呦</spen>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
show:true,
hidden:true
}
});
</script>
</html>
