Vue 入门

时间 2020-04-01

标签 vue 入门繁體版

原文原文链接

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

Vue等框架与jQuery的区别

jQuery基于dom操做html
Vue框架以数据驱动、组件化开发为核心vue

下载vue.js

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

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

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

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

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对象，只能填一个坑。app

好比有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>

1. Vue入坑——vue-router（vue路由）入门
2. Vue入门篇
3. Vue入门
4. vue入门
5. VUE入门
6. vue入门（一）
7. vue入门一
8. 入门VUE
9. Vue CLi3入门
10. VUE 入门
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用