82.4 vue 相关知识和uniapp

米洛口 2021-07-02

265

采用自底向上增量开发的设计。

采用vue的语法声明式地将数据渲染进dom，虚拟dom的计算优化提高了运行效率。

个人感觉应该理解为产生vue对象来控制了整个前端页面，然后主要要熟悉vue对象在具体的页面中是如何产生控制的。

php 中的一些设计模式也是这样，比如工厂模式也是创造出不同的对象来解决问题。

他们的共通设计思想就是，生成一个全权控制的对象，来管理某块的功能，这个跟管理公司也比较像。

<body>
<div id="app">
    <div v-html="message"></div>
</div>


<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

vue 这个对象的el 属性，就是用来选择上某个元素，实例化成一个对象，然后匹配一些data的变量，填充到模板的变量声明的地方。

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
     计算属性的 getter
    reversedMessage: function () {
       `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

计算属性。

目录结构介绍：

build

项目构建(webpack)相关代码

config

配置目录，包括端口号等。我们初学可以使用默认的。

node_modules

npm 加载的项目依赖模块

src

这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

assets:

放置一些图片，如logo等。

components:

目录里面放了一个组件文件，可以不用。

App.vue:

项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。

main.js:

项目的核心文件。

static

静态资源目录，如图片、字体等。

test

初始测试目录，可删除

.xxxx文件

这些是一些配置文件，包括语法配置，git配置等。

index.html

首页入口文件，你可以添加一些 meta 信息或统计代码啥的。

package.json

项目配置文件。

README.md

项目的说明文档，markdown 格式

参考文献：

[1] Vue.js快跑：构建触手可及的高性能Web应用

[2] 96.1 设计模式

数据库

文章转载自米洛口，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

82.4 vue 相关知识和uniapp

评论