vue 基础

偏执的太偏执、 2022-05-15 13:28 175阅读 0赞

## 1. 数据绑定 ##

//方法1
    <div id="app">
        {
       {message}}
    </div>
    //方法2
    <div id="app" v-text="message">
    </div>
    
    <div id="app" v-html="message">
    </div>

## 2.模板 ##

<div id="app">
    
    </div>
    <script>
    var app=new vue({
        el:"#app",
    	template:'<h1>{
       {message}}</h1>',
    	    data:{
    		    message:'hello vue'
    	},
    })
    </script>

## 3.事件绑定 ##

<div id="app" v-on:click="change">
    {
       {message}}
    </div>
    <script>
    var app=new vue({
        el:"#app",
        data:{
            message:"hello vue"    
        },
        methods:{
            change:function(){
                this.message="ni hao"
            }
        }
    })
    </script>
    
    说明:事件绑定可以简写为如下
    <div id="app" @click="change">

## 4.属性绑定 v-bind简写: ##

属性绑定的关键字 v-bind 简写:
    <div id="app" v-bind:title="title"></div>
    
    <script>
    var app=new Vue({
        el:"#app",
        data:{
            title:"这是一个属性绑定"
        }
    );
    </script>

**扩展: v-bind 绑定后面是一个表达式**

<div id="app" v-bind:title="'this is'title"></div>
    
    <script>
    var app=new Vue({
        el:"#app",
        data:{
            title:"这是一个属性绑定"
        }
    );
    </script>

## 5.双向绑定 v-model ##

![70][]

<div id="app">
    	<input type="text" v-model:value="content">
    	<div>{
       {content}}</div>
    </div>
    <script type="text/javascript">
    	var app=new Vue({
    		el:"#app",
    		data:{
    			content:"this is body"
    		}
    	});
    </script>

## 6.计算属性 ##

<div id="app">
    		姓: <input type="text" v-model="firstName"><div>{
       {firstName}}</div>
    		名: <input type="text" v-model="lastName"><div>{
       {lastName}}</div>
    		全名:<div>{
       {fullName}}</div>
    	</div>
    	<script type="text/javascript">
    		var app=new Vue({
    			el:"#app",
    			data:{
    				firstName:"",
    				lastName:""
    			},
    			// vue的计算属性
    			computed:{
    				fullName:function(){
    					return this.firstName+' '+this.lastName
    				}
    			}
    		});
    	</script>

## 7.侦听器 ##

<div id="app">
    		姓: <input type="text" v-model="firstName"><div>{
       {firstName}}</div>
    		名: <input type="text" v-model="lastName"><div>{
       {lastName}}</div>
    		改变次数:<div>{
       {count}}</div>
    	</div>
    	<script type="text/javascript">
    		var app=new Vue({
    			el:"#app",
    			data:{
    				firstName:"",
    				lastName:"",
    				count:0
    			},
    			// vue侦听器
    			watch:{
    				firstName:function(){
    					this.count++
    				},
    				lastName:function(){
    					this.count++
    				}
    			}
    		});
    	</script>

## 8.vue语句 ##

**v-if 或 v-show**

//if语句
        <div id="app">
    		
    		<div v-show="show">切换效果</div>
    		<button @click="toggleF">toggle</button>
    	</div>
    
    	<script type="text/javascript">
    		var app=new Vue({
    			el:"#app",
    			data:{
    				show:true
    			},
    			methods:{
    				toggleF:function(){
    					this.show=!this.show
    				}
    			}
    		});
    	</script>

**v-for**

## 9.vue方法 ##

//js部分:   
        methods: {
                fullName: function() {
                    return this.firstName + " " + this.lastName;
                }
            }
    //调用:
    <div>{
       {fullName()}}</div>

[70]: /images/20220515/5451a1f7410a416384fd4ba246382113.png