[前端] VUE (1)

孤者浪人 提交于 2020-02-01 22:14:30

vue官方网站:https://cn.vuejs.org/v2/guide/#

一、导入vue.js

使用CDN:

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

或者将vue.js的代码复制到本地vue.js中。

二、vue使用

1.初次使用vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
</head>
<body>
<div id="app">
  {{ message }}
</div>
<script src="static/vue.js"></script>
<script>
    // 使用vue
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

1)导入vue.js

2)创建一个Vue实例,注意参数是一个对象,el表示elements,表示绑定的DOM对象,data表示数据属性。

3)在被绑定的标签中使用{{message}}来表示被渲染的数据。(模板语言)

2.

 

 

 

 

666

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!