2022/3/2

最新推荐文章于 2024-08-22 14:32:34 发布

joseph(sz)

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量255

点赞数

分类专栏：学习日记文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_51141492/article/details/123266762

版权

学习日记专栏收录该内容

25 篇文章 1 订阅

订阅专栏

文章目录

一、JavaScript
- 1、原型，原型链深入
二、vue
三、Daily English

一、JavaScript

1、原型，原型链深入

当你修改obj.name 时，修改的是原型中的值，当你重新附值给obj时（obj={name:‘b’}）,相当于重新定义了obj这个变量；

换个理解方式为，obj.name 是一个指针，而obj 是一个变量；

二、vue

1、安装方式

1.1CDN引入

开发阶段使用开发版本

发布项目使用生产版本。（优化尺寸，下载更快，节省用户流量）

2.2下载和引用

2.3NPM安装（学习脚手架之后)

2、脚手架

vue CLI是一个官方发布的一个vue.js项目脚手架。

CLI（命令行界面，俗称脚手架）：Command-Line Interface

3、vue初识

let(变量)/const(常量)

3.1编程范式：声明式编程

就是当我的这个实例帮你去管理div的时候，你只需要告诉我{{message}}写什么东西就可以了。

 <body>
    <div id="app">{{message}}</div>
    <!-- 要显示下面的数据 -->

    <script src="../vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app', //用于要挂载要管理的元素
        data: {
          //定义数据
          message: '你好啊'
        }
      })
      
    </script>
  </body>

原始js做法（编程范式:命令式编程）就是一步一步告诉你怎么做。

创建div元素，设置id属性
定义一个message变量
将message变量放在前面的div元素中显示。
修改message数据：今天天气不错！
将修改后的数据再次替换到div元素中----而用声明式编程改掉message属性值，界面会自动跟着改。

3.2替换h2

<body>
    <div id="app">
      <h2>{{message}}</h2>
    </div>
    <!-- 要显示下面的数据 -->

    <script src="../vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app', //用于要挂载要管理的元素
        data: {
          //定义数据
          message: '你好啊'
        }
      })
    </script>

增加数据属性

<body>
    <div id="app">
      <h2>{{message}}</h2>
      <h1>{{name}}</h1>//显示sz
    </div>
    <!-- 要显示下面的数据 -->

    <script src="../vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app', //用于挂载要管理的元素 ，告诉vue实例你以后帮我管理
        data: {
          //定义数据
          message: '你好啊',
          name: 'sz'
        }
      })
    </script>
  </body>

这样做可以完全做到，数据和我们的界面完全分离。处理数据都在固定地方，界面也是。

vue的响应式：当数据发生改变时，界面会自动发生一个响应，页面会跟着改。

4、vue列表的展示

var-for用法，

<body>
    <div id="app">
      <ul>
        <li v-for="item in movies">{{item}}</li>
        <!-- item是变量 -->
      </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
        }
      })
    </script>
  </body>

上面数据也是响应式的

展示列表的时候，就用这种方式展示就可以了。

三、Daily English

encapsulate：封装

joseph(sz)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2022/3/2

文章目录一、JavaScript1、原型，原型链深入二、vue1、安装方式2、脚手架3、vue初识4、vue列表的展示三、Daily English一、JavaScript1、原型，原型链深入当你修改obj.name 时，修改的是原型中的值，当你重新附值给obj时（obj={name:‘b’}）,相当于重新定义了obj这个变量；换个理解方式为，obj.name 是一个指针，而obj 是一个变量；二、vue1、安装方式1.1CDN引入开发阶段使用开发版本发布项目使用生产版本。（优化尺寸，下载
复制链接

扫一扫

专栏目录