Vue入门 HelloVue

需要对HTML、CSS和JavaScript有一定的了解

Vue简介

概念

• 一套用于构建用户界面的渐进式JavaScript框架
  

安装与部署

使用<script>引入

• 独立版本

• 在Vue官网下载Vue.js

• 开发版本：包含了帮助的命令行警告（学习过程中推荐使用）
  
• 生产版本：优化尺寸和速度
  

• 在html中使用<script>标签引入
  

• CDN

• 开发版本（推荐使用）：

<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• 生产版本：

<scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script>

• 同样在html中使用<script>标签引入
  

NPM和命令行工具（CLI）

• 有一定的难度，在学习了Vue的基础知识后再去使用
  

HelloVue

第一个Vue程序

• 创建Vue实例对象

<script>varapp=newVue({
// 选项    })
</script>

• 设置el属性和data属性

<script>varapp=newVue({
el: '#app',
data: {
message: "Hello Vue"        }
    })
</script>

• 使用简介的模板语法把数据渲染到页面上

<divid='app'>    {{ message }} // {{}} 为插值表达式
</div>

• 代码截图及效果
  
  

说明

• el：挂载点（设置Vue实例挂载的元素）

• 作用范围：el元素命中的内部，在外部无效

// 在外部无效
<divid=“app”></div>{{ message }}
// 内部有效
<divid=“app”>    {{ message }}
</div>// 可嵌套
<divid=“app”>    {{ message }}
<h2>{{ message }}</h2></div>

• 选择器

• 支持各种选择器，推荐使用id选择器

// id选择器
<divid=“app”>    {{ message }}
</div>// class选择器
<divclass=“app”>    {{ message }}
</div>

• DOM元素

• html标签只支持双标签，推荐使用<div>标签

// div标签
<divid=“app”>    {{ message }}
</div>// span标签
<spanid="app">    {{ message }}
</span>

• data：数据对象

• Vue中用到的数据类型定义在data中
  
• data中可以写复杂数据类型

<script>varapp=newVue({
el: '#app',
data: {
message: "Hello Vue",
campus: ["a", "b", "c"] // 数组类型        }
    })
</script>

• 渲染复杂类型数据时，遵循js的语法
  

• methods：函数对象

• Vue中用到的函数定义在methods中

<script>varapp=newVue({
el: '#app',
data: {
message: "Hello Vue",
        },
methods: {
add: function() {
returnthis.message+"!!!";
            }
        }
    })
</script>