VUE:
1.new Vue：双向绑定、
2.自定义函数：钩子函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue_Test
</title>
<script src="https://how2j.cn/study/vue.min.js"></script>
</head>
<body>
i
<div id="div12">
<table >
<tr class="firstLine">
<td>输入数据</td>
<td>过滤后的结果</td>
</tr>
<tr>
<td >
<input v-model= "data" />
</td>
<td >
{{ data|capitaliz |capitalizLast}}
</td>
</tr>
</table>
<script>
new Vue({
el: '#div12',
data: {
data:''
},
filters:{
capitaliz:function(value) {
if (!value) return '' //如果为空，则返回空字符串
value = value.toString()
return value.charAt(0).toUpperCase() + value.substring(1)
},
capitalizLast:function(value){
if(!value) return ''
value = value.toString()
return value.substring(0, value.length - 1) + value.charAt(value.length - 1).toUpperCase()
}
}
})
</script>
</div>
<div id="div11">
<table >
<tr class="firstLine">
<td>人民币</td>
<td>美元</td>
</tr>
<tr>
<td colspan="2">
汇率： <input type="number" v-model.number="exchange" />
</td>
</tr>
<tr>
<td >
￥: <input type="number" v-model.number = "rmb" />
</td>
<td >
$1: {{rmb/exchange}}
$2: {{dollar}}
$3: {{getDollar()}}
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div11',
data:{
exchange: 6.4,
rmb: 0,
},
computed:{
dollar:function(){
return this.rmb /this.exchange;
}
},
methods:{
getDollar:function(){
return this.rmb / this.exchange;
}
}
})
</script>
<div id="div10">
<table>
<tr class="firstLine">
<td>视图类型</td>
<td>输入数据</td>
<td>绑定到Vue上的数值</td>
</tr>
<tr>
<td>单行</td>
<td>
<input v-model="input" placeholder="请输入数据">
</td>
<td><p>{{input }}</p></td>
</tr>
<tr>
<td>
多行文本
</td>
<td>
<textarea v-model="textarea" placeholder="请输入数据"></textarea>
</td>
<td>
<p>{{textarea}}</p>
</td>
</tr>
<tr>
<td>
单个复选框
</td>
<td>
<input type="checkbox" id="checkbox" v-model="checked">
</td>
<td>
<p>{{ checked }}</p>
</td>
</tr>
<tr>
<td>
多个复选框
</td>
<td>
<input type="checkbox" id="teemo" value="teemo" v-model="checkedes">
<label for="teemo">teemo</label>
<input type="checkbox" id="gareen" value="gareen" v-model="checkedes">
<label for="gareen">gareen</label>
<input type="checkbox" id="annie" value="annie" v-model="checkedes">
<label for="annie">annie</label>
</td>
<td>
<p>{{ checkedes }}</p>
</td>
</tr>
<tr>
<td>
单选按钮
</td>
<td>
<input type="radio"value="One" v-model="radio">
<label for="one">One</label>
<br>
<input type="radio" value="Two" v-model="radio">
<label for="two">Two</label>
</td>
<td>
<p>{{ radio }}</p>
</td>
</tr>
<tr>
<td>
单选选择框
</td>
<td>
<select v-model="selected" size="5">
<option disabled value="">请选择</option>
<option>AD</option>
<option>AC</option>
<option>ADC</option>
</select>
</td>
<td>
<p>{{ selected }}</p>
</td>
</tr>
<tr>
<td>
多选选择框
</td>
<td>
(通过ctrl或者shift进行多选)<br>
<select v-model="selecteds" multiple size="5">
<option disabled value="">请选择</option>
<option>AD</option>
<option>AC</option>
<option>ADC</option>
</select>
</td>
<td>
<p>{{ selecteds }}</p>
</td>
</tr>
<tr>
<td>
单个复选框
</td>
<td>
默认值是true或者false,也可以修改为自定义的值<br>
<input type="checkbox" id="toggle" true-value="yes" false-value="no" v-model="toggle">
</td>
<td>
<p>{{ toggle }}</p>
</td>
</tr>
<tr>
<td>Lazy模式</td>
<td><input v-model.lazy="input1" placeholder="失去焦点才显示"></td>
<td>{{input1}}</td>
</tr>
<tr>
<td>
单行文本1
</td>
<td>
<input v-model="input3" type="number" placeholder="输入数据">
</td>
<td>
<p>{{ input3 }}</p>
</td>
<td>
<p>{{ typeof input3 }}</p>
</td>
<tr>
<td>
单行文本2
</td>
<td>
<input v-model.number="input4" type="number" placeholder="输入数据">
</td>
<td>
<p>{{ input4 }}</p>
</td>
<td>
<p>{{ typeof input4 }}</p>
</td>
</tr>
</tr>
<tr>
<td>
单行文本
</td>
<td>
<input v-model.trim="input5" placeholder="输入数据">
</td>
<td>
<p>"{{ input5 }}"</p>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div10',
data:{
input:'',
textarea:'',
checked:'',
checkedes:[],
radio:'',
selected:'',
selecteds:[],
toggle:'',
input1:'',
input3:'',
input4:'',
input5:'',
}
})
</script>
<div id="div9">
hero name: <input v-model="name">
<buton @click="doclick">提交数据</buton>
</div>
<script>
new Vue({
el: '#div9',
data:{
name: 'asdf'
},
methods:{
doclick: function(){
alert(this.name);
}
}
})
</script>
<div id="div8">
<a v-bind:href="page">QAQ</a>
<a :href="page">asdf</a>
</div>
<script>
new Vue({
el: '#div8',
data:{
page: 'https://www.baidu.com/'
}
})
</script>
<div id="div7">
<div v-for="i in 10">
{{i}}
</div>
</div>
<script>
new Vue({
el: '#div7',
})
</script>
<style>
table tr td{
border:1px solid gray;
}
table{
border-collapse:collapse;
300px;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div6">
<table >
<tr class="firtline">
<td>number</td>
<td>name</td>
<td>hp</td>
</tr>
<tr v-for="hero,index in heros">
<td>{{index+1}}</td>
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
</table>
</div>
<script>
var data = [
{name:"盖伦",hp:341},
{name:"提莫",hp:225},
{name:"安妮",hp:427},
{name:"死歌",hp:893}
];
new Vue({
el: '#div6',
data:{
heros: data
},
})
</script>
<div id="div5">
<button v-on:click="reborn">下辈子</button>
<div v-if="number>98"> 神仙</div>
<div v-else-if="number>95"> 国家领导人</div>
<div v-else-if="number>90"> 大富商</div>
<div v-else-if="number>80"> 大企业主</div>
<div v-else-if="number>70"> 演艺明星</div>
<div v-else-if="number>60"> 小企业主</div>
<div v-else-if="number>50"> 普通公务员</div>
<div v-else-if="number>40"> 小个体户</div>
<div v-else-if="number>30"> 血汗工厂工人</div>
<div v-else-if="number>20"> 偏远山区农民</div>
<div v-else> 流浪汉</div>
</div>
<script>
new Vue({
el: '#div5',
data:{
number:0
},
methods: {
reborn: function(){
this.number = Math.random() * 100;
}
}
})
</script>
<div id = "div4">
<button v-on:click="lottery">10%的概率</button>
<div v-if="show">中了500万!</div>
<div v-else>谢谢惠顾</div>
</div>
<script>
new Vue({
el: '#div4',
data: {
show: false
},
methods:{
lottery: function(){
this.show = Math.random() < 0.1;
}
}
})
</script>
<div id="div3">
<button v-on:click="toggle">切换隐藏显示</button>
<div v-if="show">默认可见</div>
</div>
<script>
new Vue({
el: "#div3",
data: {
show: true
},
methods: {
toggle: function(){
this.show = !this.show;
}
}
})
</script>
<style type="text/css">
* {
margin: 0 auto;
text-align:center;
line-height: 40px;
}
div {
100px;
cursor:pointer;
}
#grandFather {
background: green;
}
#father {
background: blue;
}
#me {
background: red;
}#son {
background: gray;
}
</style>
<div id="content">
<div id="grandFather" v-on:click.stop="doc">
grandFather
<div id="father" v-on:click.stop="doc">
father
<div id="me" v-on:click.stop="doc">
me
<div id="son" v-on:click.stop="doc">
son
</div>
</div>
</div>
</div>
</div>
<script>
var content = new Vue({
el: '#content',
data: {
id: ''
},
methods: {
doc: function() {
this.id = event.currentTarget.id;
alert(this.id);
}
}
})
</script>
<div id="div1">
{{gareen.name}}
</div>
<script>
//准备数据
var gareen = {"name":"盖伦","hp":616};
//通过vue.js 把数据和对应的视图关联起来
new Vue({
el: '#div1',
data: {
message: gareen
}
})
</script>
<div id ="div2">
一共点击了 {{clickNumber}}次
<button @click="count">点击</button>
</div>
<script>
new Vue({
el:'#div2',
data:{
clickNumber:0
},
methods:{
count:function(){
this.clickNumber++;
}
}
})
</script>
<p>Alt + Shift + B</p>
</body>
</html>