一、vue的基本使用
<!DOCTYPE html>
<head>
<title>vue的基本使用</title>
</head>
<body>
<div id="app">
<!-- 模板语法--插值{{}} -->
<!-- 优先加载template里面的内容，如果为空也加载#app，在加载#app -->
<h1>{{msg}}</h1>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: '黄瓜'
},
template: '<div><h5>{{msg}}</h5></div>'
});
</script>
</body>
</html>
二、vue指令
<!DOCTYPE html>
<head>
<title>vue指令</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
}
.active{
background-color: green;
}
</style>
</head>
<body>
<div id="app">{{msg}}</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:function(){
return{
msg: 'vue指令',
msg2: 'vue的3种{{}}插值，1、{{}} 2、v-text="" 3\v-html=""',
isShow: true,
isActive: true,
frut: [
{id:1,name:"苹果",price:20},
{id:2,name:"火龙果",price:40},
{id:3,name:"西瓜",price:30},
{id:4,name:"荔枝",price:60}
],
person:{
name:"zhangsan",
age:30,
sex:"boy"
}
}
},
template: '<div>{{msg}} <p v-text="msg"></p> <p v-html="msg2"></p> <div v-if="isShow">v-if的使用</div> <div v-if="Math.random()>0.5">显示</div><div v-else>隐藏</div> <div v-show="true">v-show显示</div> <div class="box" v-on:click="clickHander" v-bind:class="{active:isActive}"></div> <ul><li v-for="(item,index) in frut"><h1>{{index}}</h1><h3>{{item.id}}</h3><h2>{{item.name}}</h2><h1>{{item.price}}</h1></li></ul> <ul><li v-for="(value,key) in person">{{value}}==={{key}}</li></ul> </div>',
methods:{
clickHander(e){
console.log(this);
this.isActive=!this.isActive;
}
}
});
console.log(vm);
</script>
</body>
</html>
三、vue的双向绑定
<!DOCTYPE html>
<head>
<title>vue的双向绑定</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<h3 >{{msg}}</h3>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:function(){
return{
msg:"Hello World"
}
},
template:'',
methods:{
}
});
</script>
</body>
</html>
四、局部组件的创建
<!DOCTYPE html>
<head>
<title>vue局部组件的创建</title>
</head>
<body>
<div id="app"><h1>{{msg}}</h1></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var App={
data(){
return {
}
},
template:'<div>VUE Hello </div>'
}
new Vue({
el:"#app",
data(){
return{
msg:"Hello ---- World"
}
},
template:'<App/>',
methods:{
},
components:{
App
}
});
</script>
</body>
</html>
五、全局组件
<!DOCTYPE html>
<head>
<title>vue全局组件的创建</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('Vquanju',{
data(){
return{
}
},
template:'<div><button>全局组件按钮</button></div>'
});
var Vjubu={
data(){
return{
}
},
template:'<div><h2>我是局部组件</h2><Vquanju/></div>'
}
var Vju={
data(){
return{
}
},
template:'<div><h2>我是局部组件2</h2><Vquanju/></div>'
}
new Vue({
el: "#app",
data(){
return {
}
},
template: '<div><Vjubu/><Vju/></div>',
components:{
Vjubu,
Vju
}
});
</script>
</body>
</html>
六、通过prop往子组件通信
<!DOCTYPE html>
<head>
<title>通过prop往子组件通信</title>
</head>
<div id="app">{{msg}}</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('Vchild',{
data(){
return{
}
},
template:'<div><p>我是子组件<p/><input type="text" v-model="bdata" ></input></div>',
props:['bdata']
});
Vue.component('Vparent',{
data(){
return{
bmsg: 'Hello,绑定数据'
}
},
template:'<div><p>我是父组件</p><Vchild :bdata="bmsg"/></div>'
});
var App={
data(){
return{
}
},
template:'<h1><Vparent/></h1>'
}
new Vue({
el: '#app',
data(){
return{
msg: '好罗'
}
},
components:{
App
},
template:'<App/>'
});
</script>
</html>
七、通过事件向子组件发送消息
<!DOCTYPE html>
<head>
<title>通过prop往子组件通信</title>
</head>
<div id="app">{{msg}}</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('Vchild',{
data(){
return{
newData: ''
}
},
template:'<div><p>我是子组件{{childData}}<p/><input type="text" v-model="newData" @input="changeValue(newData)" /></div>',
props:['childData'],
methods:{
changeValue(val){
this.$emit('childHandler',val);
}
}
});
Vue.component('Vparent',{
data(){
return{
bmsg: 'Hello,绑定数据'
}
},
template:'<div><p>我是父组件</p><Vchild :childData="bmsg" @childHandler="childHandler"/></div>',
methods:{
childHandler(val){
console.log(val+"-------------------")
}
}
});
var App={
data(){
return{
}
},
template:'<h1><Vparent/></h1>'
}
new Vue({
el: '#app',
data(){
return{
msg: '好罗'
}
},
components:{
App
},
template:'<App/>'
});
</script>
</html>
八、全局组件的使用
<!DOCTYPE html>
<head>
<title>vue全局组件的创建</title>
<style>
.buttons{
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
.successs{
color: #fff;
background-color: #67c23a;
border-color: #67c23a;
}
.defaults{
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('Vquanju',{
data(){
return{
}
},
template:'<div><button class="buttons" :class="type">全局组件按钮<slot></slot></button></div>',
props:['type']
});
//利用父向子传值，自己封装组件，例如按钮
var Vjubu={
data(){
return{
}
},
template:'<div><h2>我是局部组件 </h2><Vquanju>slot覆盖内容</Vquanju> <Vquanju type="successs">默认</Vquanju > <Vquanju type="defaults">成功</Vquanju></div>',
}
var Vju={
data(){
return{
}
},
template:'<div><h2>我是局部组件2</h2><Vquanju/></div>'
}
new Vue({
el: "#app",
data(){
return {
}
},
template: '<div><Vjubu/><Vju/></div>',
components:{
Vjubu,
Vju
}
});
</script>
</body>
</html>
评论 (0)