Vue-1 入门基础

二品翻译官

已于 2022-08-27 00:03:37 修改

阅读量193

点赞数

分类专栏：前端文章标签： vue.js javascript 学习

于 2022-08-26 22:14:38 首次发布

本文链接：https://blog.csdn.net/niubiwhat/article/details/126483985

版权

前端专栏收录该内容

5 篇文章 2 订阅

订阅专栏

Vue 渐进式JavaScript框架官网：https://cn.vuejs.org/
第一章 - Vue基础
第二章 - 本地应用
第三章 - 网络应用
第四章 - 综合应用

第一章 Vue基础(1/4) - 简介

1、JavaScript框架
2、简化DOM操作
3、响应式数据驱动

第一章 Vue基础(2/4) - 第一个Vue程序

1、导入开发版本的Vue.js
2、创建Vue实例对象，设置el属性和data属性
3、使用简洁的模板语法把数据渲染到页面上

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7    <title>Vue.js基础</title>
 8</head>
 9<body>
10    <div id="app">
11        {{ message }}
12        <h2> {{ user.name}} {{ user.age }} </h2>
13        <ul>
14            <li>{{ city[0] }}</li> 
15        </ul>
16    </div>
17    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
18    <script>
19        var app = new Vue({
20            el:"#app",
21            data:{
22                message:" 你好 小黑！ ",
23                user:{
24                    name:"小明",
25                    age:18
26                },
27                city:["长安区","裕华区","桥西区","新华区"]
28            }
29        })
30    </script>
31</body>
32</html>