Vue的基本格式 


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>HelloVue</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h1>hello</h1>
        <h3>有不会的请点我，我帮你查</h3>
        <a v-bind:href="url">点我</a>
　　　　　　// @click =  v-on:click
　　　　 <button v-on:click="showInfo">点我提示信息</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    
　　　　　　// ajax的格式代码
　　　　　　

$.ajax({ 

        type: "post", 

       url: "path", 

       cache:false, 

       async:false, 

        dataType: ($.browser.msie) ? "text" : "xml", 

         success: function(xmlobj){ 

                      function1(){};

        } 

});


        const x = new Vue({
            //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            el:'#root',
            data:{
                //data中用于存储数据,数据供e1所指定的容器去使用,值我们暂时先写成一个对象
                name:'LGF',
                url:'http://www.baidu.com',
　　　　　　　　　school:{
　　　　　　　　　　address:'华夏大道718号',
　　　　　　　　　　name:'华夏大学'
　　　　　　　　　　},
　　　　　　　　methods:{
　　　　　　　　　　function showInfo(event){
　　　　　　　　　　　　alert('同学你好')
　　　　　　　　　　}
　　　　　　　　}

            }
        })
    </script>

</body>
</html>

 

基本格式为     

Vue({xx(el)

　　　　,xx(data)

})   

①：el可以用id选择器来引用上面的div组件

②：data中的第一个name可以用{{name}}来动态获取，而url则需要有v-bind来标记src:,如上面的a的href(v-bind可以省略),则可以写成:href='url'

③：v-model只能用来修饰value属性格式如右→（v-model:value=='name'），因为v-model只能用来修饰value，所以我们直接省略 :value 直接写如右→(v-model='name')

 

posted @ 2021-12-16 18:57  忘词王  阅读(454)  评论(0)    收藏  举报