2.体验vue

接下来我们通过一个vue的快速入门案例,来体验一下vue。

第一步:在VS Code中创建名为01. Vue-快速入门.html的文件,并且在html文件同级创建js目录,将vue.js拷贝到js目录,如下图所示:

第二步:然后编写<script>标签来引入vue.js文件,代码如下:

html 复制代码
<script src="js/vue.js"></script>

第三步:在js代码区域定义vue对象,代码如下:

html 复制代码
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>

在创建vue对象时,有几个常用的属性:

  • el: 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
  • data: 用来定义数据模型
  • methods: 用来定义函数。这个我们在后面就会用到

第四步:在html区域编写视图,其中{{}}是插值表达式,用来将vue对象中定义的model展示到页面上的

html 复制代码
<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>

浏览器打开效果如图所示:

整体代码如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门</title>
    <script src="js/vue.js"></script>
</head>
<body>

    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>
</html>
相关推荐
xw531 分钟前
uni-app项目跑APP报useStore报错
前端·uni-app
!win !35 分钟前
uni-app项目跑APP报useStore报错
前端·uni-app
拾光拾趣录37 分钟前
Flexbox 布局:从“垂直居中都搞不定”到写出响应式万能布局
前端·css
渣渣盟1 小时前
JavaScript核心概念全解析
开发语言·javascript·es6
huxihua20061 小时前
各种前端框架界面
前端
拾光拾趣录1 小时前
GET/POST 的区别:从“为什么登录请求不能用 GET”说起
前端·网络协议
Carlos_sam2 小时前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录2 小时前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
拾光拾趣录2 小时前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区2 小时前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github