vue简单介绍

最新推荐文章于 2022-07-07 22:05:43 发布

qq_28304623

最新推荐文章于 2022-07-07 22:05:43 发布

阅读量92

点赞数

本文链接：https://blog.csdn.net/qq_28304623/article/details/104807132

版权

*vue简单介绍实例**

1.实现认识

		<div id="app">
			<h1 @click="change">{{title}}</h1>
		</div>
		
		<script src="vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					title:'欢迎来到公司',
				},
				methods:{
					change(){
						console.log('1111');
						this.title="csdn为您服务";
					}
				}
			});
		</script>

2.双向绑定



		<div id="app">

            <h1 v-if="coin==='1'">吃饭</h1>
			<h1 v-else-if="coin=='2'">睡觉</h1>
            <h1 v-else>敲键盘</h1>

            <button type="button" @click="change">今天做什么呢</button>
			<input type="text" v-model="username" />
			<h1>{{username}}</h1>
		</div>
		
		<script src="vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					username:'张三',
                    coin:"1",
				},
                methods:{
                    change(){
                        var num = 3- this.coin;
                        this.coin=num;
                    }
                }
			});
		</script>

3.循环遍历动态生成

	<body>
		<div id="app">
			
			<h1 v-for="(value, key, index) in obj">{{index}} : {{key}} : {{value}}</h1>
			
		</div>
		
		<script src="vue.js"></script>
		<script>
			
			new Vue({
				el:'#app',
				data:{
					obj:{name:"姚明", age:999, skill:'勾手',height:""},
				}
			});
		</script>
	</body>

4.指令

		<style>
			html,body,.app,#box{height:100%; margin:0; padding:0;}
			.on{background:green;}
			.off{background:blue;}
		</style>
	</head>
	<body>
		<div class="app">
			<div id="box" :class="light">
				<button type="button" @click="show">{{str}}</button>
			</div>
		</div>
		
		<script src="vue.js"></script>
		<script>
			new Vue({
				el:'.app',
				data:{
					light:'off',
					str:'白天',
				},
				methods:{
					show(){
						if(this.light=='on'){
							this.light='off';
							this.str='变蓝';
						}else{
							this.light='on';
							this.str='变绿';
						}
					}
				}
			});
		</script>
	</body>

5.mvc

<div id="box"></div>
    <script>
        //Model 数据层(负责定义数据)
        var model = {
            name: '张三',
            age: 20
        }

        //View 视图层(负责视图渲染)
        function render() {
            box.innerHTML = `
            <p>我叫：${model.name}</p>
            <button οnclick='clickBtn()'>换名</button>
            `;
        }

        //Controller 控制器层(负责改变数据及重绘视图)
        function clickBtn() {
            model.name = '李四';
            render();
        }
        render();
    </script>