vue基础篇 01 vue基础内容

01 vue基础内容

vue简介

• vue是一个javaScript框架
• vue简化了DOM操作
• 响应式数据驱动
• vue.js的官方api地址https://cn.vuejs.org/本土化非常成功，非常适合新手阅读学习

第一个vue程序

步骤

1. 导入开发版本的Vue.js

   转载自https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5

   介绍/起步

   尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

   <!-- 开发环境版本，包含了有帮助的命令行警告 -->
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   

2. 创建Vue实例对象，设置el属性和data属性

   转载自https://cn.vuejs.org/v2/guide/#%E5%A3%B0%E6%98%8E%E5%BC%8F%E6%B8%B2%E6%9F%93

   介绍/声明式渲染

   var app = new Vue({
   el: '#app',
   data: {
    message: 'Hello Vue!'
   }
   })
   

3. 使用简洁的模板语法把数据渲染到页面上

   转载自https://cn.vuejs.org/v2/guide/#%E5%A3%B0%E6%98%8E%E5%BC%8F%E6%B8%B2%E6%9F%93

   介绍/声明式渲染

   <div id="app">
   {{ message }}
   </div>
   

效果

el:挂载点

• el是用来设置Vue示例挂载(管理)的元素
• Vue会管理el选项选中的元素及其内部的后代元素
• 可以使用其他的选择器，但是建议使用ID选择器
• 可以使用其他的双标签，不能使用HTML和BODY

data:数据对象

• Vue中用到的数据定义在data中
• data中可以写复杂类型的数据
• 渲染复杂类型数据时，遵守js的语法即可