Vue.js基础(All In One HTML Page)
韩嘉胜
Vue.js基础(All In One HTML Page)
- 小胡子模板
- v-html v-text
- v-bind
- 绑定class
- 绑定style
- 计算属性
- methods与computed
- v-on
- 条件渲染
- v-show
- v-for遍历数组
- v-for遍历对象
- v-model表单绑定
- v-model:radio
- v-model:checkbox 单选
- v-model:checkbox 多选
- v-model:修饰符
- 过滤器
- 观察属性
- 组件基础
- 局部的组件
- 表行组件
- 组件数据
- 为组件传递数据HTML->组件
- 为组件传递变量数据
- 组件props参数验证
- 事件传递:子组件注册v-on事件
- slot插槽
- 组合slot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>View</title>
<script src="http://119.3.180.71/api/vue.js"></script>
<style>
p {
color: orangered;
}
.line {
height: 2px;
width: 100%;
background-color: rgb(35, 37, 37);
}
.bigsize {
font-size: 30px;
}
.blackcolor {
color: black;
}
</style>
</head>
<body>
<!-- 1_使用胡子模板 -->
<div class="line"></div>
<div id="div_1">
<p>小胡子模板</p>
<h1>{{num}}</h1>
<h2>{{num*2}}</h2>
</div>
<script type="text/javascript">
let div_1 = new Vue({
el: "#div_1",
data: {
num: 1,
}
});
//响应式
div_1._data.num = 2;
console.log(div_1);
</script>
<!-- v-html v-text -->
<div class="line"></div>
<div id="div_2">
<p style="color:rgb(57, 170, 47);">v-html v-text</p>
<p>{{link}}</p>
<p v-html="link"></p>
<p v-text="link"></p>
</div>
<script type="text/javascript">
let div_2 = new Vue({
el: "#div_2",
data: {
link: '<a href="www.baidu.com">百度</a>'
}
});
</script>
<!-- 使用双向绑定v-bind -->
<div class="line"></div>
<div id="div_3">
<p style="color:rgb(57, 170, 47);">使用双向绑定v-bind</p>
<a v-bind:href="url">{{name}}</a>
</div>
<script type="text/javascript">
let div_3 = new Vue({
el: "#div_3",
data: {
url: "http://119.3.180.71",
name: "图享"
}
});
</script>
<!-- 绑定样式单 -->
<div class="line"></div>
<div id="div_4">
<p style="color:rgb(57, 170, 47);">绑定class</p>
<p :class="{'bigsize':isBigsize,'blackcolor':isBlackcolor}">HELLO WORLD</p>
<p :class="['bigsize','blackcolor']">HELLO WORLD</p>
</div>
<script type="text/javascript">
let div_4 = new Vue({
el: "#div_4",
data: {
isBigsize: true,
isBlackcolor: true,
}
});
//我们可以改变isBigsize isBlackcolor响应classList中的元素
</script>
<!-- :style绑定样式 -->
<div class="line"></div>
<div id="div_5">
<p style="color:rgb(57, 170, 47);">绑定style</p>
<p :style="{color:color,fontSize:fontsize+'px'}">HELLO WORLD</p>
<p :style='[bold,grey]'>HELLO CODER</p>
</div>
<script type="text/javascript">
let div_5 = new Vue({
el: "#div_5",
data: {
color: "red",
fontsize: "30",
bold: {
fontSize: "20px",
fontWeight: "bold"
},
grey: {
color: "grey"
}
}
});
</script>
<!-- 计算属性 -->
<div class="line"></div>
<div id="div_6">
<p style="color:rgb(57, 170, 47);">计算属性</p>
<p>{{content}}</p>
</div>
<script type="text/javascript">
let div_6 = new Vue({
el: "#div_6",
data: {
name: "高万禄",
bike: "美利达"
},
computed: {
content: {
get() {
return this.name + "骑" + this.bike;
},
set(newdata) {
}
}
}
});
</script>
<!-- 计算属性与方法 -->
<div class="line"></div>
<div id="div_7">
<p style="color:rgb(57, 170, 47);">methods与computed</p>
<h4>computed会缓存,调用一次即可,methods每次都要执行</h4>
<p>方法调用:-{{showme()}}</p>
<p>计算属性:-{{content}}</p>
</div>
<script type="text/javascript">
let div_7 = new Vue({
el: "#div_7",
data: {
name: "高万禄",
bike: "美利达幻影"
},
computed: {
content() {
return this.name + "骑" + this.bike;
}
},
methods: {
showme() {
return this.name + "骑" + this.bike;
}
}
});
</script>
<!-- v-on事件监听 -->
<div class="line"></div>
<div id="div_8">
<p style="color:rgb(57, 170, 47);">Vue.js绑定事件 更多事件请见官方文档</p>
<p>{{count}}</p>
<button v-on:click="buttonClick">点击加一</button>
<button @click="add(10,$event)">点击加十</button>
</div>
<script type="text/javascript">
let div_8 = new Vue({
el: "#div_8",
data: {
count: 0,
},
methods: {
buttonClick() {
this.count++;
},
add(size, event) {
console.log(event);
this.count += size;
}
}
});
</script>
<!-- 条件渲染 -->
<div class="line"></div>
<div id="div_9">
<p style="color:rgb(57, 170, 47);">条件渲染</p>
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=80">良好</p>
<p v-else-if="score>=60">及格</p>
<p v-else>不及格</p>
</div>
<script type="text/javascript">
let div_9 = new Vue({
el: "#div_9",
data: {
score: 59,
}
});
</script>
<!-- 响应式显示v-show -->
<div class="line"></div>
<div id="div_10">
<p style="color:rgb(57, 170, 47);">v-show</p>
<p v-show="isShow">
HELLO
</p>
<button v-on:click="clickbutton">点击</button>
</div>
<script type="text/javascript">
let div_10 = new Vue({
el: "#div_10",
data: {
isShow: true,
},
methods: {
clickbutton() {
this.isShow = !this.isShow;
}
}
});
</script>
<!-- v-for遍历数组 -->
<div class="line"></div>
<div id="div_11">
<p style="color:rgb(57, 170, 47);">v-for遍历数组</p>
<ul>
<li v-for="item in person">{{item.name}}</li>
<li v-for="(item,index) in person">{{index}}-{{item.name}}-{{item.age}}岁</li>
</ul>
<button v-on:click="click">响应式:反转</button>
</div>
<script type="text/javascript">
let div_11 = new Vue({
el: "#div_11",
data: {
person: [{
name: '小明',
age: 18
}, {
name: '小敏',
age: 19
}, {
name: "小红",
age: 19
}, {
name: '万禄',
age: 19
}]
},
methods: {
click() {
this.person.reverse();
}
}
});
</script>
<!-- v-for遍历对象 -->
<div class="line"></div>
<div id="div_12">
<p style="color:rgb(57, 170, 47);">v-for遍历对象</p>
<ul>
<li v-for="(value,key,index) in obj">
{{value}}-{{key}}-{{index}}
</li>
</ul>
</div>
<script type="text/javascript">
let div_12 = new Vue({
el: "#div_12",
data: {
obj: {
name: "晓红",
age: 19,
email: "232vfs@163.com"
}
}
});
</script>
<!-- v-model表单绑定 -->
<!-- v-model语法糖原理 -->
<!-- <input type="text" v-bind:value="message" v-on:input="message=$event.target.value"> -->
<div class="line"></div>
<div id="div_13">
<p style="color:rgb(57, 170, 47);">v-model表单绑定</p>
<p>输入内容为:{{data}}</p>
<input type="text" style="width:100%;height:25px;" v-model="data" placeholder="在此输入内容">
</div>
<script type="text/javascript">
let div_13 = new Vue({
el: "#div_13",
data: {
data: "",
}
});
</script>
<!-- v-model:radio -->
<div class="line"></div>
<div id="div_14">
<p style="color:rgb(57, 170, 47);">v-model:radio</p>
<label for="male">
<input type="radio" v-bind:value="abc" v-model="choose">男
</label>
<label for="female">
<input type="radio" value="female" v-model="choose">女
</label>
<p>您的选择:{{choose}}</p>
</div>
<script type="text/javascript">
let div_14 = new Vue({
el: "#div_14",
data: {
data: "",
abc: "male",
choose: ""
}
});
</script>
<!-- v-model:checkbox -->
<div class="line"></div>
<div id="div_15">
<p style="color:rgb(57, 170, 47);">v-model:checkbox</p>
<label for="check">
<input type="checkbox" v-model="checked" id="check">同意协议
</label>
<p>是否被选中:{{checked}}</p>
<!-- 多个复选框 -->
<label><input type="checkbox" v-model="phone" value="三星">三星</label>
<label><input type="checkbox" v-model="phone" value="LG">LG</label>
<label><input type="checkbox" v-model="phone" value="谷歌">谷歌</label>
<p>您选中的品牌:{{phone}}</p>
</div>
<script type="text/javascript">
let div_15 = new Vue({
el: "#div_15",
data: {
checked: false,
phone: [],
}
});
</script>
<!-- v-model:checkbox -->
<div class="line"></div>
<div id="div_16">
<p style="color:rgb(57, 170, 47);">v-model:checkbox</p>
<p>{{myselect}}</p>
<select v-model="myselect">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</select>
<p>{{myselect_m}}</p>
<select v-model="myselect_m" multiple>
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</select>
</div>
<script type="text/javascript">
let div_16 = new Vue({
el: "#div_16",
data: {
myselect: 'none',
myselect_m: [],
}
});
</script>
<!-- 修饰符 -->
<div class="line"></div>
<div id="div_17">
<p style="color:rgb(57, 170, 47);">v-model:修饰符</p>
<p>{{data_1}}:{{typeof(data_1)}}</p>
<label>v-model.number
<input type="text" v-model.number="data_1">
</label>
<p>{{data_2}}:{{typeof(data_2)}}</p>
<label>v-model.lazy
<input type="text" v-model.lazy="data_2">
</label>
<p>{{data_3}}:{{typeof(data_3)}}</p>
<label>v-model.trim
<input type="text" v-model.trim="data_3">
</label>
</div>
<script type="text/javascript">
let div_17 = new Vue({
el: "#div_17",
data: {
data_1: "",
data_2: "",
data_3: ""
}
});
</script>
<!-- 组件 -->
<div class="line"></div>
<div id="div_18">
<p style="color:rgb(57, 170, 47);">component组件</p>
<ul>
<game-item v-for="item in games" v-bind:game="item"></game-item>
</ul>
</div>
<script type="text/javascript">
Vue.component('game-item', {
props: ['game'],
template: '<li>{{game.title}}</li>'
});
let div_18 = new Vue({
el: "#div_18",
data: {
games: [{
title: "斗地主"
},
{
title: "打麻雀"
},
{
title: "UNO"
}
]
}
});
</script>
<!-- 过滤器 -->
<div class="line"></div>
<div id="div_19">
<p style="color:rgb(57, 170, 47);">过滤器</p>
<p>{{age | add}}</p>
</div>
<script type="text/javascript">
let div_19 = new Vue({
el: "#div_19",
data: {
age: 10,
},
filters: {
add: function (value) {
return value + 1;
}
}
});
</script>
<!-- 观察属性 -->
<div class="line"></div>
<div id="div_20">
<p style="color:rgb(57, 170, 47);">观察属性</p>
<p>价格{{price}}</p>
<p>{{age}}</p>
<button v-on:click="btnclick(1000)">加价</button>
</div>
<script type="text/javascript">
let div_20 = new Vue({
el: "#div_20",
data: {
price: 10,
age: 10,
},
watch: {
price: function (newval, oldval) {
this.age = newval;
}
},
methods: {
btnclick: function (newprice) {
this.price = this.price + newprice;
}
}
});
</script>
<!-- 组件基础中的基础 -->
<div class="line"></div>
<div id="div_21">
<p style="color:rgb(57, 170, 47);">组件基础中的基础</p>
<hello></hello>
</div>
<script type="text/javascript">
Vue.component('hello', {
template: '<h3>你好呀!</h3>'
})
let div_21 = new Vue({
el: "#div_21",
});
</script>
<!-- 局部的组件 -->
<div class="line"></div>
<div id="div_22">
<p style="color:rgb(57, 170, 47);">局部的组件</p>
<hello></hello>
</div>
<script type="text/javascript">
let hello_component = {
template: '<h3>你好呀!</h3>'
};
let div_22 = new Vue({
el: "#div_22",
components: {
'hello': hello_component,
}
});
</script>
<!-- 表行组件 -->
<div class="line"></div>
<div id="div_23">
<p style="color:rgb(57, 170, 47);">表行组件</p>
<table border="1">
<tr>
<td>编号</td>
<td>名称</td>
</tr>
<tr is="my-row1"></tr>
<tr is="my-row2"></tr>
<tr is="my-row3"></tr>
</table>
</div>
<script type="text/javascript">
Vue.component('my-row1', {
template: '<tr><td>1</td><td>长度</td></tr>'
});
Vue.component('my-row2', {
template: '<tr> <td > 2 </td> <td> 的 </td> </tr>'
});
Vue.component('my-row3', {
template: '<tr> <td > 2 </td> <td> 长度 </td> </tr>'
});
let div_23 = new Vue({
el: "#div_23",
});
</script>
<!-- 组件数据 -->
<div class="line"></div>
<div id="div_24">
<p style="color:rgb(57, 170, 47);">组件数据</p>
<my-row1></my-row1>
</div>
<script type="text/javascript">
Vue.component('my-row1', {
template: '<h3>{{hello}}</h3>',
data() {
return {
hello: "你好",
}
}
});
let div_24 = new Vue({
el: "#div_24",
});
</script>
<!-- 为组件传递数据HTML->组件 -->
<div class="line"></div>
<div id="div_25">
<p style="color:rgb(57, 170, 47);">为组件传递数据HTML->组件</p>
<my-row1 :score="100"></my-row1>
</div>
<script type="text/javascript">
Vue.component('my-row1', {
props: ['score'],
template: '<h3>{{score}}:{{grade}}</h3>',
computed: {
grade() {
if (this.score > 90) {
return "优秀";
}
}
}
});
let div_25 = new Vue({
el: "#div_25",
});
</script>
<!-- 为组件传递变量数据 -->
<div class="line"></div>
<div id="div_26">
<p style="color:rgb(57, 170, 47);">为组件传递变量数据</p>
<my-row1 :score="score"></my-row1>
</div>
<script type="text/javascript">
Vue.component('my-row1', {
props: ['score'],
template: '<h3>{{score}}:{{grade}}</h3>',
computed: {
grade() {
if (this.score > 90) {
return "优秀";
}
}
}
});
let div_26 = new Vue({
el: "#div_26",
data: {
score: 100,
}
});
</script>
<!-- 组件props参数验证 -->
<div class="line"></div>
<div id="div_27">
<p style="color:rgb(57, 170, 47);">组件props参数验证</p>
<my-row1 :score="score"></my-row1>
</div>
<script type="text/javascript">
Vue.component('my-row1', {
props: {
score: {
type: Number,
validator(value) {
return value >= 0 && value <= 100;
},
default () {
return 0;
},
required: false, //是否必须使用
}
},
template: '<h3>{{score}}:{{grade}}</h3>',
computed: {
grade() {
if (this.score > 90) {
return "优秀";
}
}
}
});
let div_27 = new Vue({
el: "#div_27",
data: {
score: 91,
}
});
</script>
<!-- 事件传递:子组件注册v-on事件 -->
<div class="line"></div>
<div id="div_28">
<p style="color:rgb(57, 170, 47);">事件传递:子组件注册v-on事件</p>
<h3>6+12={{result}}</h3>
<add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method>
</div>
<script type="text/javascript">
Vue.component('add-method', {
props: ['a', 'b'],
template: '<div><button v-on:click="add">加欧</button></div>',
methods: {
add: function () {
var value = 0;
value = this.a + this.b;
this.$emit('add_event', {
result: value
});
}
}
});
let div_28 = new Vue({
el: "#div_28",
data: {
result: "?",
},
methods: {
getAddResult(pval) {
this.result = pval.result;
}
}
});
</script>
<!-- 组件:slot插槽 -->
<div class="line"></div>
<div id="div_29">
<p style="color:rgb(57, 170, 47);">
组件:slot插槽
slot是父组件与子组件的通讯方式，可以将父组件的内容显示在子组件中
</p>
<say-to pname="mike">
你的教程太好了
</say-to>
</div>
<script type="text/javascript">
Vue.component('say-to', {
props: ['pname'],
template: '<div>' +
'你好,<strong>{{pname}}<strong>' +
'<slot></slot>' +
'</div>',
});
let div_29 = new Vue({
el: "#div_29",
});
</script>
<!-- 组件:组合slot -->
<div class="line"></div>
<div id="div_30">
<p style="color:rgb(57, 170, 47);">
组合slot:
在子组件中通过为多个slot进行命名,来接受父组件的不同内容的数据
</p>
<say-to pname="mike">
<p slot="1">你的教程太好了</p>
<p slot="2">真的吗</p>
<p slot="3">好像挺不错的</p>
</say-to>
</div>
<script type="text/javascript">
Vue.component('say-to', {
props: ['pname'],
template: '<div>' +
'你好,<strong>{{pname}}<strong>' +
'<slot name="1"></slot>' +
'<slot name="2"></slot>' +
'<slot name="3"></slot>' +
'</div>',
});
let div_30 = new Vue({
el: "#div_30",
});
</script>
</body>
</html>
类似资料：