vue 入门 简单学习

第一步:下载一个vue的库

随便在网上找一个cdn
https://cdn.bootcss.com/vue/2.5.15/vue.min.js

第二步：安装express

{
    "name": "hahaha",
    "version": "0.0.1",
    "paivate": true,
    "description": "hahhahahahah",
    "dependencies": {
        "express": "^4.16.3"
    }
}

第三步：写一个简单的运行服务器

var express = require("express");
var app = express();

app.use(express.static(__dirname))
.listen(8080);

第四步：简单的文本内容的替换

    
    


    

        小明今年{{message}}岁了
    
    
    

-效果展示：

image.png

image.png

-两秒钟之后内容替换为99

第五步：vue 输入框，响应式文本替换

    
    


    

        
        输入的内容是：{{name}}
    
    
    

• 效果展示：

  
  
  image.png
• 文本内容根据输入框的内容进行响应式的展示

第六步：vue 扩展标签内容

• 展示效果：

  
  
  image.png

第七步：vue 标签替换

    
    



    

        
123
    
    
    
    
    
    

• 效果展示：

  
  
  image.png
• 对原有标签的内容进行了一个标签的替换