Vue.js 简化版学习

Vue.js 简化版学习

1. 安装与部署
2. 创建第一个vue应用
3. 数据与方法
4. 生命周期
5. 模板语法-插值
6. 模板语法-指令
7. class与style绑定
8. 条件渲染
9. 列表渲染
10. 事件绑定
11. 表单输入绑定
12. 组件基础
13. 组件注册
14. 单文件组件

1，安装与部署

vue.js 下载地址

2，创建第一个vue应用

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

<div id="app">
    {{message}}
</div>

<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            message:'hello Vue!'
        }
    )}
</script>

3，数据与方法

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
    {{a}}
</div>

<script type="text/javascript">
    var data = {a:1};
    var vm = new Vue({
        el:'#app',
        data:data
    )}

vm.$watch('a',function(newVal,oldVal){
    console.log(newVal,oldVal);
})
vm.$data.a = "test..."
</script>

4，生命周期

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
    el:"#app",
    data:{
        msg:"hello vue",
    },
    //在实例初始化之后，数据观测(data observer)和event/watcher 时间配置之前被调用
    beforeCreate:function(){
        console.log('beforeCreate');
    },
    
    /* 在实例创建完成后被立即调用，在这一步，实例已完成以下的配置：数据观测(data observer),属性和方法的运算，watch/event 事件回调，然而挂在阶段还没开始，$el属性目前不可见
    */
    created:function(){
        console.log('created');
    },
    //在挂载开始之前被调用：相关的渲染函数首次被调用
    beforeMount:function(){
        console.log('beforeMount');
    },
    //el 被新创建的 vm.$el替换，挂载成功
    mounted:function(){
      console.log('mounted');  
    },
    //数据更新时调用
    beforeUpdate:function(){
        console.log('beforeUpdate');
    },
    //组件DOM已经更新，组件更新完毕
    updated:function(){
        console.log('updated');    
    }
    
    
});
setTimeout(function(){
    vm.msg = "change...";
},3000)
</script>

5，模板语法-插值

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
    {{msg}}
    <p>Using mustaches:{{rawHtml}}</p>
    <p v-html="rawHtml"></p>
    <div v-bind:class="color">test...</div>
    <p>{{number+1}}</p>
    <p>{{1==1?'YES':'NO'}}</p>
    <p>{{message.split('').reverse().join('')}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
    el:"#app",
    data:{
        msg:"hi vue",
        rawHtml:'<span style="color:red">this is should be red</span>',
        color:'blue',
        number:10,
        ok:1,
        mesage:"vue"
    }
});
vm.msh="hi...";
</script>

<style type="text/css">
.red{color:red:}
.blue{color:blue;font-size:100px;}

</style>

6，模板语法-指令

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
 
    <p v-if="seen">现在你看到我了</p>
    <a v-bind:href="url">...</a>
    
    <div @click="click1">
        <div @click.stop="click2">
            click me 可以阻止事件的冒泡
        </div>
    </div>
</div>
<script type="text/javascript">
var vm = new Vue({
    el:"#app",
    data:{
        seen:false,
        url:"www.baidu.com"
    },
    methods:{
        click1:function(){
            console.log('click1...');
        },
        click2:function(){
            console.log('click2...');
        },
    }
})
</script>

7，class与style绑定

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
    <div 
    class="test"
    v-bind:class="[isActive?'active':'',isGreen?'green':'']"
    style="width:200px;height:200px;text-align:center;line-height:200px;"
    >
    hi vue
        <div 
        :style="{color:color,fontSize:size,background:isRed?'#FF0000':''}"
        >
        hi vue
        </div>
    </div>
</div>
<script type="text/javascript">
var vm = new Vue({
    el:"#app",
    data:{
        isActive:true,
        isGreen:true,
        color:"#FFFFFF",
        size:'50px',
        isRed:true
    }

});
</script>

<style>
.test{font-size:30px;}
.green{color:#00FF00;}
.active{background:#FF0000;}
</style>

8，条件渲染

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
    <div v-else-if="type === 'A' ">
    A
    </div>
    <div v-else-if="type === 'B' ">
    B
    </div>
    <div v-else-if="type === 'C' ">
    C
    </div>
    <div v-else>
        Not A/B/C
    </div>
    
    <!--类似的有v-show 来根据条件展示元素-->
    <h1 v-show="ok">Hello!</h1>
    
</div>
<script type="text/javascript">
var vm = new Vue({
    el:"#app",
    data:{
        type:""
    }
});
</script>

9，列表渲染

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
    
    <ul>
        <li v-for="item,index in items" :key="index">
        {{index}}{{item.message}}
        </li>
    </ul>

    <ul>
        <li v-for="value,key in object" :key="key">
        {{key}}:{{value}}
        </li>
    </ul>
    
</div>
<script type="text/javascript">
var vm = new Vue({
    el:"#app",
    data:{
        items:[
        {message:'Foo'},
        {message:'Bar'}
        ],
        object:{
            title:'how to do lists in vue',
            author:'baobaohui',
            publishedAt:'2019-10-12'
        }
    }
});
</script>

10，事件绑定

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
    
<div id="example-1">
    <button v-on:click="counter +=1">数值：{{counter}}</button>
    <button v-on:dblclick="greet('abc',$event)">Greet</button>
    
    
</div>
    
</div>
<script type="text/javascript">
var vm = new Vue({
    el:"#app",
    data:{
        counter:0,
        name:"vue"
    },
    methods:{
        greet:function(str,e){
            alert(str);
            console.log(e);
        }
        
    }
});
</script>

11，表单输入绑定

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
<input v-model="message" placeholder="edit me">
<p> Message is :{{message}}</p>
<textarea v-model="message2" placeholder="add multiple lines"></textarea>
<p style="white-space:pre-line:">{{message2}}</p>
<br/>

<div style="margin-top:20px;">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names:{{checkedNames}}</span>
</div>

<div style="margin-top:20px;">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="Two">Two</label>
    <br>
    <span>Picked:{{picked}}</span>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
    el:"#app",
    data:{
        message:"test",
        message2:"hi",
        checkedNames:['Jack','John'],
        picked:"Two"
    },
    methods:{
        submit:function(){
            console.log(this.message);
            var postObj={
                msg1:this.message,
                msg2:this.message2,
                checkval:this.checkedNames
            };
            cosole.log(postObj);
        }
        
    }
});
</script>

12，组件基础

13，组件注册

14，单文件组件