Vue.js的学习笔记Cha1--day1

Enoshima

已于 2022-07-22 22:43:32 修改

阅读量211

点赞数

文章标签： vue.js 学习前端

于 2022-07-22 21:59:04 首次发布

本文链接：https://blog.csdn.net/Enoshima/article/details/125935520

版权

笔记基于此教程：黑马–4小时入门Vue.js
用IJ作为开发环境
虽然已经出了3.x，但是从发布时间来看，四小时的教程是基于2.x的（3.x发布于2020年，视频发布于2019），后续的实战教程应该是3.x…所以还是先学2.0。

-----------------------------------------分割线-----------------------------------------------
####### P1：课程介绍

Vue.js 是一款能提高开发效率的流行前端框架。但是需要先有HTML, CSS, JS, AJAX的知识基础；
课程章节：
基础：跑一个基本程序
本地应用：常见语法并实现本地应用
网络应用我觉得本项目可能不需要，所以暂且不学。

####### P2：Vue基础
Vue是：一个JS框架；能半自动的完成部分对页面元素的操作；页面随操作响应式变化；
还听不懂，之后就懂了吧

####### P3：第一个Vue程序
Vue官网
 文档

开发环境 VS 生产环境
开发：完整，适合学习使用，有提示 √
生产：简明，速度快，无提示
安装
· 在官网中点击安装

· 根据指示下载了vue devtools插件：点击这个拼图块，管理，左上角的杠杠，添加新扩展，搜索，获取

· 点击下载开发版本：用这个链接应该也行https://cn.vuejs.org/js/vue.js
会得到一个js文件

·引用它
在桌面新建一个文件夹（最好英文命名），用IJ打开该文件夹。保险起见，我把Vue.js拖进了这个文件夹。
新建一个html文件，在body中复制粘贴这句话

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

选择你喜欢的浏览器运行
·写一些简单的代码
此处教程是直接在html里写，我是按照官网教程分了index.js和index.html两个文件。
教程：
在这里插入图片描述
此处新建了一个Vue实例。其中，el为id选择器，选择id为app的元素。P4、P5分别详细介绍了el和data两个属性
像下面这样htmljs分开写可以，但是教程写在一起就是为了开始初步介绍vue的方便性。所以还是建议大家放在一起写。

<body>
    <div id="app">
        {{ message }}
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="./index.js"></script>
</body>

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

P4：el挂载点

通过css选择器设置Vue实例管理的元素。被管理的元素中被双大括号括起的元素就会被data里的内容替换
- 在el管理的元素内部的双大括号也会被替换
  比如图片里的span元素也受到控制
- css选择器都可以使用
- 也可以用于除了div之外的元素，但是body不行

P5：data数据对象中的复杂数据类型

正常使用

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"hello vue",
                question:{
                    name:"想去的城市?",
                    number:"3"
                },
                cities:["上海","北京","杭州"]
            }
        })
    </script>

效果：
在这里插入图片描述
Chang1为止的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{ message }}
        <h2>{{question.name}}：{{question.number}}</h2>
        <ul>
            <li>{{cities[0]}}</li>
            <li>{{cities[1]}}</li>
            <li>{{cities[2]}}</li>
        </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--    <script src="./index.js"></script>-->
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"hello vue",
                question:{
                    name:"想去的城市?",
                    number:"3"
                },
                cities:["上海","北京","杭州"]
            }
        })
    </script>
</body>
</html>