02安装和使用

# 安装和使用

# 安装

先打开vue网站 (opens new window)

<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js>"></script>

# vue实例化

new Vue({
  el:"#app",//element选择器
  data:{//数据模型
    msg:"hi world"
  }
})

1
2
3
4
5
6

练习🚀

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">{{msg}}</div>
<script>
    new Vue({//类
        el: "#app", //Element简写 元素
        data: {//数据驱动——data是对象来了
            msg: "hello vue", //msg：key值    “hello vue”：Element元素
        }
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12

<div id="app">{{num === 1 ? '是1' : "不是1"}}</div>
<script>
    new Vue({//类
        el: "#app", //元素
        data: {
            num: 1, //是1   //写2就：打印不是1
        }
    })
</script>

1
2
3
4
5
6
7
8
9

编辑

上次更新: 2023/08/06, 00:38:41

← 01mvvm和mvc 03模版语法→