vue 学习一

  • Z时代
  • 2024-01-10
  • 分类：综合

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个组件来操作的,会存在组件之间的通讯,涉及子组件,父组件的之间的通讯.

以上是 vue 学习一 的全部内容， 来源链接： utcz.com/z/379682.html

回到顶部