vue基础知识 小案例展现
发布时间：2022-02-21 编辑：魏新明阅读（82）
hello world小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--插值表达式，绑定vue中的data数据-->
{{message}}
</div>
<script>
//1、创建一个vue对象
new Vue({
el: '#app',//2、绑定vue作用的范围
data: {//3、定义页面中显示的模型数据
message: 'hello world!'
}
})
</script>
</body>
</html>2.双向绑定 点击同意按钮后 才可以注册 否则无法点击
v-if：条件指令
<div id="app">
<!--插值表达式，绑定vue中的data数据-->
是否同意协议:<input type="checkbox" v-model="show" />
<button type="button" v-if="show" >注册</button>
<button type="button" disabled='disabled' v-else >注册</button>
</div>
<script>
//1、创建一个vue对象
new Vue({
el: '#app',//2、绑定vue作用的范围
data: {//3、定义页面中显示的模型数据
show:true
}
})
</script>
3.methods 进行方法的各种操作 弹窗例子
<div id="app">
<button type="button" @click="tan" >点击我就弹窗</button>
</div>
<script>
//1、创建一个vue对象
new Vue({
el: '#app',//2、绑定vue作用的范围
data: {//3、定义页面中显示的模型数据
},
methods:{
tan(){
alert('弹窗')
}
}
})
</script>
4.v-for循环
<div id="app">
<ul>
<li v-for="n in 10">{{n}}</li> <!--占位 && 简单的循环-->
</ul>
<ul>
<li v-for="item in list" :key="item.id">员工:{{item.name}} 年龄:{{item.age}}</li>
</ul>
</div>
<script>
//1、创建一个vue对象
new Vue({
el: '#app',//2、绑定vue作用的范围
data: {//3、定义页面中显示的模型数据
list:[
{id:1,name:'张红丽',age:16},
{id:2,name:'王小强',age:48},
{id:3,name:'李白',age:60}
]
}
})
</script>5. 组件的使用
<div id="app">
<h3>全局:组件</h3>
<dog></dog>
<hr>
<h3>局部组件 父传子</h3>
<worker v-for="item in list" :key="item.id" :lst='item'></worker>
</div>
<script>
Vue.component('dog',{
template:'<p>dog全局组件</p>'
})
//1、创建一个vue对象
new Vue({
el: '#app',//2、绑定vue作用的范围
data: {//3、定义页面中显示的模型数据
list:[
{id:1,name:'张红丽',age:16},
{id:2,name:'王小强',age:48},
{id:3,name:'李白',age:60}
]
},
components: {
'worker':{
props:['lst'],
template:'<p >{{lst.name}}</p>'
}
},
})
</script>
6.vue的生命周期
一般使用 mounted 加载的数据 填充到页面中 其他的不太使用
上一页：vue 出现“export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue‘等解决办法