你当前的位子: 首页 >> 学无止境 >> vue

vue基础知识 小案例展现

发布时间:2022-02-21 编辑:魏新明阅读(82)

  1. 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>

image.png


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>

image.png



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. 组件的使用

image.png

<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>

image.png


6.vue的生命周期

一般使用 mounted 加载的数据 填充到页面中  其他的不太使用


关键字:魏新明,魏新明个人博客,web全栈

上一页:vue 出现“export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue‘等解决办法

下一页:vue ref差不多等于是id了 能找到当前ref下的所有dom