Vue入门学习
Vue基础指令与案例演示
1.v-text与v-html
v-text只会发数据渲染到标签，不会对html标签进行解析、
v-html会对html标签进行解析
<div id="box">
<!-- vue的指令：vue提供的一种行间属性，你可以加在标签上，对这个DOM元素应用一些行为。 -->
<h1>{{msg}}</h1>
<!-- v-text 把数据渲染到标签 -->
<h1 v-text="num"></h1>
<!-- v-text 不会对html标签进行解析，只是普通字符串 -->
<h1 v-text="hehe"></h1>
<!-- 会对html标签进行解析 -->
<h1 v-html="hehe"></h1>
</div>
const vm = new Vue({
el: '#box',
data: {
msg: 'Hello Vue',
num:100,
hehe:"<i style='color:red'>abc</i>"
}
})
2.v-bind，v-bind可以绑定标签的属性，之后这个属性就可以用vue的数据
<div id="box">
<h1>{{msg}}</h1>
<img v-bind:src="url" >
<button type="button" @click="changeImg()">更换图片</button>
<a v-bind:href="href">进入百度</a>
<!--v-bind 可以简写，直接给个冒号 -->
<a :href="href">进入百度</a>
</div>
const vm = new Vue({
el: '#box',
data: {
msg: 'Hello Vue',
url:'https://cn.vuejs.org/images/logo.png',
href:'http://www.baidu.com'
},
methods:{
changeImg(){
//alert("Abc");
console.log(this instanceof Vue);
this.url="img/a.jpg"
this.href="http://www.163.com"
}
}
})
3.v-on事件的绑定，v-on可以用来绑定某些事件，可以省略为@
<div id="box">
<h1>{{msg}}</h1>
<button type="button" v-on:click="show(100)">一个按钮</button>
<!-- 绑定事件时，事件函数名后面的括号，如果你传递参数，可以省略不写 -->
<button type="button" v-on:click="test">一个按钮</button>
<!-- 绑定事件时，可以缩写 使用@符号 来替代v-on -->
<button type="button" @click="haha()">一个按钮</button>
</div>
const vm = new Vue({
el: '#box',
data: {
msg: 'Hello Vue',
num: 500
},
//定义事件的处理函数
methods: {
show: function(num) {
//this代表的是vue对象
alert(this.num)
alert("点击了" + num);
},
test: function() {
alert("test");
},
//es6语法
haha(){
alert("haha")
}
}
})
4.v-model表单项的数据绑定，其实现的是 数据的双向绑定即 数据变–视图变，视图变–数据变
<div id="box">
A的值：<input type="text" id="" value="" v-model="a" />
<br>
B的值：<input type="text" id="" value="" v-model="b" />
<br>
<button type="button" @click="add()">计算结果</button>
<h4>结果：{{result}}</h4>
</div>
new Vue({
el: '#box',
data: {
a: '',
b: '',
result: '0'
},
methods: {
add() {
this.result = this.a*1 + this.b*1;
}
}
})
5.v-pre指令 v-pre 让vue不要去解析{{}} 保持原有的内容
<div id="box">
{{msg}}
<!-- {{msg}} v-pre 让vue不要去解析{{}} 保持原有的内容-->
<h1 v-pre>{{msg}}</h1>
</div>
new Vue({
el:'#box',
data:{
msg:"hello"
}
})
6.v-clock指令，可以让这个标签隐藏，直到解析完成后出现
<div id="box">
<h1 v-cloak>{{msg}}</h1>
</div>
new Vue({
el:'#box',
data:{
msg:"hello"
},
beforeMount:function(){
//模拟阻塞，这个模板没有挂载完毕，用户就会看到{{}}用户体验不好
//我们为了提高用户体验，如果模板没有挂载完毕，就不要看到{{}}
//可以在标签上使用 v-clock 来提高用户体验
alert("abc");
}
})
7.计算属性，当我要用到一个数据，这个数据是根据其他属性的变化的得来的，我就可以使用计算属性来做
<div id="box">
姓:<input type="" name="" id="" value="" v-model="xing" />
<br>
名:<input type="" name="" id="" value="" v-model="ming" />
<br>
<!-- 全名:<input type="" name="" id="" value="" v-model="xing.concat(' ').concat(ming)"/> -->
<input type="" name="" id="" value="" v-model="fullname">
</div>
new Vue({
el: '#box',
data: {
xing: '',
ming: ''
},
//我要用到一个数据，这个数据是根据其他属性的变化的得来的，我就可以使用计算属性来做
//计算属性
computed: {
//这个fullname函数，在第一次初始化的时候，会调用一次
//下来就是这个函数中用的属性一变化，这个函数调用
fullname: function() {
var x=this.xing;
var m=this.ming;
console.log("fullname函数调用了")
return x.concat(' ').concat(m);
}
}
})
案例：反转字符串
<div id="box">
姓:<input type="" name="" id="" value="" v-model="xing" />
<br>
名:<input type="" name="" id="" value="" v-model="ming" />
<br>
<input type="" name="" id="" value="" v-model="fullname">
</div>
new Vue({
el: '#box',
data: {
xing: '',
ming: ''
},
computed: {
//这个fullname函数，在第一次初始化的时候，会调用一次
//下来就是这个函数中用的属性一变化，这个函数调用
fullname: {
//返回计算属性fullname的值
get: function() {
var x = this.xing;
var m = this.ming;
console.log("get函数调用了")
return x.concat(' ').concat(m);
},
//可以监听计算属性值fullname的变化
set:function(value){
//value形参就是fullname变化之后的值
console.log("fullname 一变化，set方法就会调用",value)
var arr=value.split(' ');
this.xing=arr[0];
this.ming=arr[1];
}
}
}
})
8.属性的侦听
<div id="box">
<input type="" name="" id="" value="" v-model="msg" />
</div>
var vm=new Vue({
el: '#box',
data: {
msg: "hello",
num: 100
},
watch: {
//监听msg属性的变化
msg: function(newValue, oldValue) {
console.log("只要我侦听的属性msg一变化，就会调用", newValue, oldValue);
},
//监听num属性的变化
//参数1：你监听的这个属性变化之后的值，
//参数2：你监听的这个属性变化之前的值
num: function(newValue, oldValue) {
console.log("只要我侦听的属性msg一变化，就会调用", newValue, oldValue);
}
}
//另外一种写法
vm.$watch('msg',function(newValue,oldVue){
console.log(newValue,oldVue);
})
//vue实例属性 $data 可以取出vue中配置的data属性的值
var v=vm.$data.msg;
var v=vm.$data.num;
alert(v);
//获取vue管理的这个模板对象
var divObj=vm.$el;
alert(divObj);
})
9.class属性的绑定
<style>
.aclass{
color: red;
}
.bclass{
background-color: pink;
}
</style>
<div id="box">
<h1 class="aclass">可惜没如果</h1>
<h1 :class="'aclass'">可惜没如果</h1>
<h1 :class="['aclass','bclass']">可惜没如果</h1>
<h1 :class="{'aclass':true,'bclass':false}">可惜没如果</h1>
<h1 :class="myclass">可惜没如果</h1>
<h1 :class="[myclass,myclass1]">可惜没如果</h1>
</div>
<script type="text/javascript">
var vm= new Vue({
el: '#box',
data: {
num: 100,
myclass:'aclass',
myclass1:'bclass'
}
})
10.style属性值的绑定
<div id="box">
<h1 style="color: pink">可惜没如果</h1>
<h1 :style="{'color':'pink'}">可惜没如果</h1>
<h1 :style="{'color':'pink','background':'black'}">可惜没如果</h1>
<h1 :style="{'color':a,'background':b}">可惜没如果</h1>
</div>
<script type="text/javascript">
var vm= new Vue({
el: '#box',
data: {
a:'pink',
b:'black'
}
})
</script>
Component组件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="demo">
<h1 v-if="state==='a'">a</h1>
<h1 v-if="state==='b'">b</h1>
<h1 v-else>no</h1>
<h1 v-for="(arr,index) in arrs">
{{index}}+{{arr}}
</h1>
<input type="text" v-model="sex">{{sex}}
<hr>
<input type="radio" value="男" v-model="sex">男
<input type="radio" value="女" v-model="sex">女
选中了:{{sex}}
<a v-on:click="fun" href="#">我是链接</a>
<xx v-for="(arr,index) in arrs" v-bind:xxx="arr"></xx>
<!--v-for遍历出来后v-bind中将arr的值通过组件传递给xxx-->
</div>
</body>
</html>
<script>
Vue.component("xx",{
props:['xxx'],
template:'<h1>{{xxx}}</h1>'
//取props中xxx的值
});
var vm = new Vue({
el: "#demo",
data: {
state: "a",
sex: "",
msg: "hello world!",
arrs: [{message: "xi"}, {message: "haha"}, {data: "heihei"}]
},
methods: {
fun: function () {
alert(this.msg);
}
}
});
</script>
异步处理
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="demo">
{{info.name}}
{{info.address.street}}
{{info.links[1]}}
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#demo",
data:{}
,
data() {
return {
info: {
// name: null,
// address: {
// street: null,
// city: null,
// country: null
// },
// link:[]
}
}
},
created(){
this.data()
},
methods:{
data:function () {
axios.get("data.json").then(response => (this.info = response.data));
}
}
// ,
// mounted() {
//
// }
});
</script>
计算属性
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
a:<input type="text" v-model="a">
b:<input type="text" v-model="b">
a+b:<input type="text" v-model="aandb">
a-b:<input type="text" v-model="asubb">
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
data: {
a: '',
b: ''
},
computed: {
aandb: {
get: function () {
var x = this.a;
var y = this.b;
return Number(x) + Number(y);
}
// set:function () {
//
// }
},
asubb: {
get: function () {
var x = this.a;
var y = this.b;
return Number(x) - Number(y);
}
// set:function () {
//
// }
}
}
});
</script>
slot插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
</head>
<body>
<div id="app">
<books>
<!--将 model层的数据 data_book_header: "leo读书列表", 传递给 视图 books-header -->
<books-header slot="books-header" v-bind:prop_book_header="data_book_header" ></books-header>
<!--将 model层的数据 data_book_items: ['中国心绞痛','GUTISKA','钱币收藏册'], 传递给 视图 book-body-->
<books-body slot="books-body" v-for="(book_item,index) in data_book_items" :index="index" v-on:remove="removeItems(index)" :key="index" v-bind:prop_book_name="book_item"></books-body>
</books>
</div>
<!--导入VUE.JS-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<script>
Vue.component("books",{
template:'<div>\
<slot name="books-header" ></slot>\
<ul>\
<slot name="books-body" ></slot>\
</ul>\
</div>\ '
});
Vue.component("books-header",{
props: ['prop_book_header'], //属性 prop_book_header 用于数据交互
template:'<p>{{ prop_book_header }} </p> '
});
Vue.component("books-body",{
props: ['prop_book_name','index'], //属性 prop_book_name 用于数据交互
template:'<li>{{ prop_book_name }} <button @click="remove" >删除</button></li> ',
methods:{
remove:function (index) {
this.$emit('remove',index);
}
} });
var vmdata={ // model 层
data_book_header: "leo读书列表",
data_book_items: ['中国心绞痛','GUTISKA','钱币收藏册'],
}
var vm=new Vue({ // ViewModel 层
el:"#app",
data:vmdata,
methods:{
removeItems:function (index) {
this.data_book_items.splice(index,1)
}
}
})
</script>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
