Vue初学（第一天笔记）

傷城~ 2022-12-16 09:23 99阅读 0赞

**1：Vue是一个渐进式框架，可以对项目进行一点一点的重构。**

**2：Vue有很多高级的功能**

1：解耦数据和视图

2： 可复用组件

3：前端路由技术

4：状态管理

5：虚拟DOM

**3：Vue安装**

1：cdn引入

2：下载和引入

3：npm安装

let修饰变量，const修饰常量

# 1：Hellow vue #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    
    
    <script src="../js/vue.js"></script>
    
    
    <body>
    <div id="app">
        {
       {message}}
        <h1>{
       {name}}</h1>
    </div>
    </body>
    <script>
        //Vue响应式：当数据发生改变的时候 页面也会随之改变
        //vue（声明式编程）   jq原生（命令式编程）
        // let定义变量  const定义常量
        //创建vue对象传入options{}
        //1：{}包含el属性：该属性觉得挂载到哪一个元素
        //2：{}包含了data属性，这个属性包含了一些数据  数据可以是我们直接定义出来  也可以是从后台传过来
        const app=new Vue({
            el : "#app",//定义要挂载的元素
            data :{ //定义数据
                message : "你好宝贝",
                name : "刘宝贝"  //数据和界面完全分离
            }
        })
    </script>
    </html>

# 2：Vue列表的展示：v-for=“item in movies”的使用 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <script src="../js/vue.js"></script>
    <body>
    <div id="app">
        {
       {message}}
        <ul>
            <li v-for="item in movies">{
       {item}}</li>
        </ul>
    </div>
    <div id="app2">
        <ul>
            <li v-for="item in movies">{
       {item}}</li>
        </ul>
    </div>
    </body>
    <script>
        const app=new Vue({
            el :'#app',
            data : {
                message :'信息环境',
                movies : ['星际穿越','盗梦空间','星球大战','猴子']
            }
        })
    
        const  app1=new Vue({
            el :'#app2',
            data:{
                movies :['新球大战','嘻嘻嘻','家有儿女','白夜追凶']
            }
        })
    </script>
    </html>