1 vue 简介
2 vue 官网
https://cn.vuejs.org/
3 第一个 vue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 关联数据 （响应式）--> {{ message }} </div> <script> var app = new Vue({ // 创建 Vue 应用 el: ‘#app‘, // 挂载点，挂载元素 data: { // 数据（响应式） message: ‘Hello lizi!‘ } }) </script> </body> </html>
4 data 中复杂数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 关联数据 （响应式）--> <p>{{ message }}</p> <p>{{ user.name }} {{ user.password }}</p> <p>{{ blogs[0].title}}</p> </div> <script> var app = new Vue({ // 创建 Vue 应用 el: ‘#app‘, // 挂载点，挂载元素 data: { // 数据（响应式） message: ‘Hello lizi!‘, user: { name: ‘lizi‘, password: ‘123456‘ }, blogs: [ {title: ‘title1‘,content: ‘content1‘}, {title: ‘title2‘,content: ‘content2‘}, {title: ‘title3‘,content: ‘content3‘} ] } }) </script> </body> </html>
原文：https://www.cnblogs.com/lizitestdev/p/14619172.html