前端基础-Vue

VUE

1.简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2.使用

(1)CDN方法

在页面上以 CDN 包的形式导入。
<script src="https://unpkg.com/vue@next"></script>

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

由于CDN是为加快网络访问速度而被优化的网络覆盖层，因此被形象地称为“网络加速器”。

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">    
//<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
//如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
  <p>{{ message }}</p>
//{{ }} 用于输出对象属性和函数返回值。
</div>
<script>
new Vue({
  el: '#app',   //id选择器
  data: {         //输出什么东西？
    message: 'Hello Vue.js!'
  }
})
</script>

(2)使用npm方法

npm run dev

Vue.js 提供一个官方命令行工具vue-cli，可用于快速搭建大型单页应用。

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project

安装及运行：
$ cd my-project
$ cnpm install
$ cnpm run dev

项目打包：
npm run build
执行完成后，会在 Vue 项目下生成一个 dist 目录，一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images。
直接双击 dist/index.html 文件就可以在浏览器中看到效果了。

3.VUE项目

(1)项目目录

目录/文件	说明
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 格式

app.vue:

<!-- 展示模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>
 
<script>
// 导入组件
import Hello from './components/Hello'
export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

<!-- 样式代码 -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

(2)template标签

使用 <template> 保留页面加载时隐藏的内容。使用 JavaScript 来显示：

<!DOCTYPE html>
<html>
<body>

<h1>template 元素</h1>

<p>单击下面的按钮，显示 template 元素中的隐藏内容。</p>

<button onclick="showContent()">显示隐藏的内容</button>

<template>     //点击按钮才会显示，JavaScript响应事件
  <h2>Flower</h2>
  <img src="/i/photo/flower.gif" width="180" height="180">
</template>

<script>
function showContent() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

</body>
</html>

(3)vue应用

每个 Vue 应用都需要通过实例化 Vue 来实现。

var vm = new Vue({
  // 选项
})

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vue_det">   //块儿
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>
    <script type="text/javascript">
    // 我们的数据对象
    var data = { site: "hello", url: "www.runoob.com", alexa: 10000}
    var vm = new Vue({    //vue应用
        el: '#vue_det',    //id选择器
        data: data       //数据，在外面
    })
    // 它们引用相同的对象！
    document.write(vm.site === data.site) // true
	document.write("<br>")
    // 设置属性也会影响到原始数据
    vm.site = "Runoob"
    document.write(data.site + "<br>") // Runoob

    // ……反之亦然
    data.alexa = 1234
    document.write(vm.alexa) // 1234
    </script>
</body>
</html>

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

4.vscode运行html

(1).新建.html文件

(2).安装open in browser插件

(3).html页面右键选择open in other browser

5.vue项目不用localhost

改变config下index.js里的ip，也是本机的私有ip，公网内的其他ip可访问。

6.项目解读

main.js 像是加vue应用的。

.vue 里面有<template> <script> <style>

首页入口文件：index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myfirstvue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

项目入口文件：App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

ES6：全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

export default

用于导出常量、函数、文件、模块等。

export可以有多个，export default只能有一个

hello.vue中：
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

posted @ 2021-08-19 19:27 HexagonMan 阅读(82) 评论(0) 收藏举报

刷新页面返回顶部

六边形侠