<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<a v-bind:href="link">百度</a>
</div>
<hr/>
<div id="app2">
<a :href="link">百度</a>
<p @click="clicked">{{ text }}</p>
</div>
<hr/>
<div id="app3">
<button :click="clicked">点我</button>
</div>
<hr/>
<div id="app4">
{{ message | filterUpperCase }}
</div>
<hr/>
<div id="app5">
<input type="text" placeholder="请输入" v-model="text">
<p>输入的内容:{{ text }}</p>
</div>
<hr/>
<div id="app6">
<textarea name="" id="" cols="30" rows="10" v-model="content"></textarea>
<p>输入的内容:{{ content }}</p>
</div>
<hr/>
<div id="app7">
<input type="checkbox" v-model="isChecked" id="aaa">
<label for="aaa">{{ isChecked }}</label>
</div>
<hr/>
<div id="app8">
<input type="checkbox" name="" id="Apple" value="苹果" v-model="fruit">
<label for="Apple">苹果</label>
<input type="checkbox" name="" id="Banana" value="香蕉" v-model="fruit">
<label for="Banana">香蕉</label>
<input type="checkbox" name="" id="Orange" value="橙子" v-model="fruit">
<label for="Orange">橙子</label>
<p>你喜欢的水果有:{{ fruit }}</p>
</div>
<div id="app9">
<input type="radio" name="" id="play" value="玩游戏" v-model="hobby">
<label for="play">玩游戏</label>
<input type="radio" name="" id="movie" value="看电影" v-model="hobby">
<label for="movie">看电影</label>
<p>你的爱好是:{{ hobby }}</p>
</div>
<div id="app10">
<select name="" v-model="fruit">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Orange">Orange</option>
</select>
<p>you selected : {{ fruit }}</p>
</div>
<script src="vue2.js"></script>
<script>
/**
* 表单控件绑定
* */
// 单行文本
new Vue({
el: '#app5',
data: {
text: ''
}
});
// 多行文本
new Vue({
el: '#app6',
data: {
content: ''
}
});
// 复选框
// 一个复选框
new Vue({
el: '#app7',
data: {
isChecked: false
}
});
// 多个复选框
new Vue({
el: '#app8',
data: {
fruit: []
}
});
// 单选按钮
new Vue({
el: '#app9',
data: {
hobby: ''
}
});
// 下拉列表
new Vue({
el: '#app10',
data: {
fruit: null
}
});
/**
* 过滤器
* Vue.js 允许自定义过滤器
* 常用来文本格式化
* 一般用在 mustche插值 和 v-bind 表达式
* 过滤器应该被添加在Javascript表达式的尾部,由"管道"[ | ]符指示
* */
new Vue({
el: '#app4',
data: {
message: 'hello world'
},
filters: {
// 将字符串转换成大写
filterUpperCase: function (value) {
if (!value) return '';
return value.toString().toUpperCase();
}
}
});
/**
* 修饰符
* 修饰符是以是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定
* 常用的有取消默认事件 .prevent
* 更多修饰符请参考: https://cn.vuejs.org/v2/api/#v-on
* */
new Vue({
el: '#app3',
methods: {
clicked: function () {
alert('不会弹出来了');
}
}
});
/**
* 指令的缩写
*
* v-bind可以缩写为: ':'
* 即 v-bind:href 等价于 :href
*
* v-on可以缩写为: '@'
* 即 v-on:click 等价于 @click
*
* */
new Vue({
el: '#app2',
data: {
link: 'http://www.baidu.com',
text: '点我试试'
},
methods: {
clicked: function () {
this.text = '你还真点我了';
}
}
});
/**
* v-bind
* 作用:可以更新HTML属性
* v-bind:标签属性名="值"
* 比如:v-bind:href="http://www.baidu.com"
* */
new Vue({
el: '#app',
data: {
link: "http://www.baidu.com"
}
});
</script>
</body>
</html>
Vue快速入门知识点(二)
最新推荐文章于 2024-06-12 08:41:10 发布