码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 入门

时间:2020-03-31 22:51:21      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:bsp   node   ret   数据驱动   命令   代码   最新   template   har   

 

vue是国人开发的一个js框架,国人用得比较多。

 

 

Vue等框架与jQuery的区别

  • jQuery基于dom操作

  • Vue框架以数据驱动、组件化开发为核心

 

 

下载vue.js

如果安装了node,执行命令 npm install vue 下载vue.js,可在vue后面加上 @版本号  指定要下载的vue.js版本,未指定时默认下载最新稳定版。

在代码中引入下载的vue.js:

<script type="text/javascript" src="vue.js"></script>

上线时要换为生产版  vue.min.js

 

 


 

 

demo   vue.js的简单使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 引入vue.js -->
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 
    </head>
    <body>
        
        <!--留坑,后续填数据 -->
        <div id="app"></div> 
        <div class="red"></div> 
        <div></div> 
        
        <script>
            new Vue({
                el:#app,  //通过id来指定
                template:<p>hello vue1</p>  //要填充的内容。可以去嵌套元素,比如‘<div><p></p></div>‘;但只能有一个根元素,‘<div></div><div></div>‘这样就不行
            });
            
            new Vue({
                el:.red,  //通过class来指定
                template:<p>hello vue2</p>
            });
            
            new Vue({
                el:div,  //通过元素名来指定。不常用,因为控制不精细
                template:<p>hello vue3</p>
            });
                    
        </script>
        
    </body>
</html>

new Vue()只会产生一个Vue对象,只能填一个坑。

比如有2个<div class="red">,一个new Vue()只能填一个。

 

 

 

demo   动态数据

    <div id="app"></div> 

    <script>
        new Vue({
            el:#app,
            template:<p>姓名:{{name}},年龄:{{age}}</p>,  //可以用{{ }}占位
            data:function(){
                return{
                    name:chy,  //数据
                    age:20,
                }
            }
        });
    </script>

 

Vue 入门

标签:bsp   node   ret   数据驱动   命令   代码   最新   template   har   

原文地址:https://www.cnblogs.com/chy18883701161/p/12609088.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!