您的位置：首页 > 移动开发

使用vue开发web app - 1 - 初步使用vue创建组件

2016-12-31 10:40 573 查看

使用vue开发web app - 1 - 初步使用vue创建组件

课程参考视频：https://egghead.io/lessons/javascript-create-a-basic-component-using-vue-js

目的：

· 初步使用vue创建组件

1. 通过el元素，进行数据绑定

2. 通过”{{ }}”访问data中的数据字段

3. 学会使用v-html

步骤：

· 引入vuejs文件

1. 创建div，展示文本

2. 进行数据绑定

3. 通过控制台动态修改html文本内容

基本要求

了解json数据格式；

了解基本html使用；

源码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- 引入cdn的vue.js文件 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- 创建card的div -->
<div id="card">
<!-- 展示vue数据data中的title字段 -->
<header>{{ title }}</header>
<!-- 展示vue数据data中的content字段 -->
<div v-html="content">{{ content }}</div>
</div>

<script type="text/javascript">
var card = new Vue({
// 进行控件绑定(el->element)，绑定html页面中id为card的控件，相当于document.getElementById("card")
el:"#card",
data: {
//通过{{title}}访问
title : "哆啦A梦",
//通过{{content}}访问
content : "<strong>哆啦A梦</strong>有<em>百宝袋</em>，有<em>竹蜻蜓</em>"
}

})
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

使用vue开发web app - 1 - 初步使用vue创建组件

目录

目的：

步骤：

基本要求

源码：