起步
使用 Hello World 例子。
工具：vscode
1.ctrl+n创建文件
2.ctrl+s保存为.html格式
3.！+Tab调用html模板
4.<head>标签加入
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
即可应用vue
声明渲染
5.<body>标签中加入
<div id="app">
{{ message }}
</div>
6.再加入
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
7.运行页面即可实现将一个 Vue 应用挂载到一个 DOM 元素上。（ps：DOM 元素（Document Object Model element）是指网页中的 HTML 或 XML 文档中的标签，如 <div>、<p>、<span>等。）
8.打开开发者模式，进入控制台，写入
app.message='hello wa’即可改变message的信息
使用v-bind绑定属性
9.重复1.2.3.4后<body>标签中加入
<!-- 2 -->
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此动态绑定的提示信息！
</span>
</div>
10.再加入
<!-- 3 -->
<script>
var app2 = new Vue({
el: '#app-2',
data: {
// new Date().toLocaleString():获取当前时间并将其转换为本地化的日期和时间格式
message: '页面加载于' + new Date().toLocaleString()
}
})
</script>
11.运行实现新的绑定元素 attribute方法
5601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
