Vue 入门

 

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>
        
        <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:'

hello vue1

' //要填充的内容。可以去嵌套元素,比如'

';但只能有一个根元素,'
'这样就不行
}); new Vue({ el:'.red', //通过class来指定 template:'

hello vue2

' }); new Vue({ el:'div', //通过元素名来指定。不常用,因为控制不精细 template:'

hello vue3

' }); script> body> html>

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

比如有2个

,一个new Vue()只能填一个。

 

 

 

demo   动态数据

    <div id="app">div> 

    <script>
        new Vue({
            el:'#app',
            template:'

姓名:{{name}},年龄:{{age}}

', //可以用{{ }}占位 data:function(){ return{ name:'chy', //数据 age:20, } } }); script>

 

你可能感兴趣的:(Vue 入门)