vue 学习一

　　　这个是很早之前公司要使用vue.js时候学习记在有道云笔记上的,发觉那个笔记贼多了,没办法,觉得是要换个地方存笔记了,

　　　一vue.js的使用:

　　　　可以在页面是直接使用:

　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
        <style>
            
            #app{
                color: blueviolet;
            }
            .bg{
                color: red;
            }
        </style>
    
    </head>
    <body>
        <div id="app">
            
        
        <div class="bg2">
            helloWorld
            {{message}}
            {{count +2}}
        </div>
        <div>
            
            {{count}}
            {{template}}
        </div>
        <div v-html="template"></div>
        <div>
            
                    <a v-bind:href="url">baidu</a>
        </div>

        <a :href="url"></a>
        <a href="http://www.baidu.com">baidu</a>
        
        <button type="button" v-on:click="submit()">加数字</button>
        <button type="button" @click="submit()">加数字</button>
        
        </div>    
    
        

        
    </body>
    <script>
        
        new Vue({
            el:"#app",
            data:{
                message:'hellowprld',
                count:0,
                url:'http://www.baidu.com',
                template:'<div> heoo</div>'
            },
            methods:{
                submit:function(){
                    this.count++
                }
            }
            
        })
        
    </script>
</html>

就可以在页面上直接使用了, 这种引入是不是很好调式的,

所以一般在开发环境中引入:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

vue.js,是一个双向数据绑定的前端框架,而且,如果代码简洁,是不直接操作dom的,,而是通过组件直接进行通讯;

new Vue({
            el:"#app",
            data:{
                message:'hellowprld',
                count:0,
                url:'http://www.baidu.com',
                template:'<div> heoo</div>'
            },
            methods:{
                submit:function(){
                    this.count++
                }
            }
            
        })

通常会创建一个vue的实例,如上面脚本,代表,vue.js来管控上面页面来操作.,

通常不是这样来操作页面的,而是使用vue.js的npm来管理依赖库,webpack进行打包页面,通过路由来进行页面进行转发,同时每个页面都会拆分成几个组件来进行操作,

 

 如上图就是分成4个组件来操作的,会存在组件之间的通讯,涉及子组件,父组件的之间的通讯.

　　

 

posted @ 2019-02-02 21:05  菩提树下的丁春秋  阅读(220)  评论(0)  编辑  收藏  举报