Day42——Vue学习笔记

Vue入门

文章目录

    • Vue入门
      • NodeJS学习
      • Vue
        • V-bind
      • 条件与循环
        • V-if
        • V-for
      • 双向绑定
      • 事件:v-on(@)
      • 路由
      • axios
      • 实战
      • Vue.js学习地址
      • 补充webpack的学习

它为前端框架

前端化工程

开发工具:VScode(推荐)

前端环境:NodeJS

下载地址:

https://code.visualstudio.com/docs/?dv=win

https://nodejs.org/en/

如何验证安装好:

VScode可以正常打开

NodeJS 已配置环境变量

在cmd中输入node -v ,npm -v 来验证安装

NodeJS学习

NodeJS为一个在服务器端能够运行JavaScript的环境

前端版的Maven(核心为pom.xml)

NodeJs的核心package.json

打开VScode后,

Day42——Vue学习笔记_第1张图片

建立新文件夹后,在终端中打开,使用下面命令进行配置

npm init -y 初始化一个基本的配置文件

# 安装环境 npm install 包名 -g(全局)
npm install express -g
# npm 默认仓库在国外,设置镜像到淘宝
npm config set regisry http://registry.npm.taobao.org
npm config list

# npm install 依赖
npm install jquery
npm install [email protected]

# --save-dev 或 -D 代表这个只在开发环境中有效,不会打包出去
npm install --save-dev eslint
npm install -D eslint

# 自动下载项目中的依赖package.json
npm install

# 自动更新包名
npm update 包名
# 卸载某个包
npm uninstall

# 后面开发基于ES6,但浏览器支持的是es5规范,所以需要webpack打包,自动将es6转为es5(用cmd以管理员身份运行)
npm install -g webpack webpack-cli
webpack -v

# 安装babel-cli(以管理员身份运行)
npm install -g babel-cli
babel --version

使用VScode进行学习

在目录下新建一文件夹存放所写代码

一、首先建立01-demo.js文件,先从控制台程序学习

console.log("hello,Node")

在终端打开后输入

PS D:\environment\41.20-3-2\Vue\nodejs\node-start> node .\01-控制台程序.js

就会打印出hello,Node

二、认识第二个程序,从建立服务器响应数据至前端页面

const http = require('http')
http.createServer(function (request, response) {
  // 设置响应头文件
  response.writeHead(200, { 'Content-Type': 'text/plain' })
  // 发送数据
  response.end("hello,server")
}).listen(8080)
//在8080端口号监听
console.log("server is running... port:8080")

像第一个程序一样在终端打开,输入

node .\02-server-app.js

会打印server is running… port:8080,在浏览器中输入localhost:8080访问,页面打印hello,server


Vue

核心:只关注视图层

核心思想:MVVM

MVVM 源自于经典的 MVC(Model-View-Controller)模式。MVVM 的核心是 ViewModel 层,负责转换 Model 中的数据对象来让数据变得更容易管理和使用,其作用如下:

  • 该层向上与视图层进行双向数据绑定
  • 向下与 Model 层通过接口请求进行数据交互

MVVM 已经相当成熟了,主要运用但不仅仅在网络应用程序开发中。当下流行的 MVVM 框架有 Vue.jsAngularJS

测试代码前准备:

在vscode商店中安装live Server,方便后面进行测试

建立新的文件夹,将文件夹右键在终端打开,输入

npm install vue

导入Vue依赖,并在此文件夹下建立lib目录,在导入的依赖中找到vue.js文件,将其复制于lib下,方便代码依赖的使用;

建立一个hellovue.html文件,开始第一个测试代码:

栗子1


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        {{msg}}
    div>

    <script src="./lib/vue.js"> script>
    <script>
        //代码,创建vue对象,绑定视图层
        var vue = new Vue({
            el:'#app',//绑定视图
            data:{
                msg:'hello,vue'
            }
        })
    script>
body>
html>
html>

在代码空白中,鼠标右键选择Open with live Server,在浏览器中可以看到hello,vue

打开控制台

Day42——Vue学习笔记_第2张图片

将把msg更改后,会立即在页面刷新,这样称为声明式渲染,所有东西都是响应式的


V-bind

栗子2:

认识基本数据渲染指令

新建一个html文件


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">
        <h1 v-bind:title="msg">我是标题h1>

    div>
    <script src="./lib/vue.js">script>
    <script>   
        var vue = new Vue({
            el:'#app',
            data:{
                msg:'time:' + new Date().toLocaleTimeString()
            }
        })
    script>
body>
html>

v-bind attribute 被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 title attribute 和 Vue 实例的 msg 属性保持一致”。

当鼠标放上标题时,显示效果如

Day42——Vue学习笔记_第3张图片

同样, 打开浏览器的控制台,输入 app2.message = '新消息',就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。


条件与循环

V-if

控制切换一个元素是否显示

<div id="app-3">
  <p v-if="seen">现在你看到我了p>
div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

用浏览器打开后,会显示:现在你看到我了

使用控制台输入app3.seen=false,就会将刚显示的语句变消失。

这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute,还可以绑定到 DOM 结构

V-for

这个指令可以绑定数组的数据来渲染一个项目列表


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            li>
        ol>

    div>


    <script src="./lib/vue.js">script>
    <script>
        var app4 = new Vue({
            el:'#app-4',
            data:{
                todos:[
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个SSM' }
                ]
            }
        })
    script>

body>
body>
html>

用浏览器打开后

Day42——Vue学习笔记_第4张图片

也可在控制台输入:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wqEoxZdo-1583237425407)(VUE.assets/1583153166185.png)]

发现列表最后添加了一个新项目。


双向绑定

单向绑定:v-bind

双向绑定:v-model

栗子3:

<div id="app">
    <input type="text" v-bind:value="serachMap.keyword">

    <input type="text" v-model="serachMap.keyword">
div>
<script src="./lib/vue.js"></script>
<script>
    var vue = new Vue({
        el:'#app',
        data:{
            serachMap:{
                keyword:'lala'    
            }
        }
    })
</script>

第一个input框绑定到vue中serachMap里的keyword,就是可以读取到;第二个input不仅于keyword所绑定,而且它一旦更改,会使得第一个input中的内容也随之更改!

浏览器打开后:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JQpPe7TW-1583237425408)(VUE.assets/1583156567233.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OFnA6Svs-1583237425408)(VUE.assets/1583156590744.png)]


事件:v-on(@)

v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

测试代码:查询数据显示出来

<div id="app">
    <button @click="serach()">查询button>
	
    <p>你要查询的是:{{result.title}}p>
    <p><a v-bind:href="result.site" target="_blank">{{result.title}}a>p>
div>
    <script src="./lib/vue.js"></script>
    <script>
        var vue = new Vue({
            el:'#app',     //绑定视图
            data:{     //定义要给前端的数据,页面所有数据都来自这里
                //查询结果
                result:{}
            },
            methods:{    //事件
                serach(){
                    console.log("serach")
                    this.result={
                        "title":"标题哦",
                        "site":"http://www.baidu.com/"
                    }
                }
            }
        })
    </script>

Day42——Vue学习笔记_第5张图片

点击后

Day42——Vue学习笔记_第6张图片

点击链接会跳转至百度首页。


路由

在测试路由前,所作准备

新建立测试文件夹,再鼠标右键,在终端中打开,导入vue,vue-router的依赖

npm install vue
npm install vue-router

接着在此目录下建立lib文件夹,将依赖中的vue.js与vue-router.js复制放入

建立新的测试html文件,进行测试

路由:页面跳转

通过路由实现单页面跳转


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>
  <div id="app">
    <h1>Hello,App!h1>
    <p>
      <router-link to="/">首页router-link>
      <router-link to="/student">学员管理router-link>
      <router-link to="/teacher">讲师管理router-link>
    p>
    
    <router-view>router-view>
  div>

  <script src="./lib/vue.js">script>
  <script src="./lib/vue-router.js">script>
  <script>
    //1、定义路由的组件
    const welcome = { template: '
欢迎
'
} const student = { template: '
Student List
'
} const teacher = { template: '
Teachet List
'
} //2、定义路由 const routes = [ { path: '/', redirect: '/welcome' }, { path: '/welcome', component: welcome }, { path: '/student', component: student }, { path: '/teacher', component: teacher } ] // 3、创建 router实例 const router = new VueRouter({ routes: routes // }) // 挂载路由 new Vue({ el: '#app', router })
script> body> html>

Day42——Vue学习笔记_第7张图片

当点击不同link时,下方会即时刷新出所属数据


axios

异步通信,与ajax类似

vue推荐使用

使用此功能也是需要进行导入依赖的工作,步骤于上例相似

在此测试目录下建立测试的html文件,一个json文件

  <div id="app">
    <button @click="getList()">测试button>
    <table>
      
      <tr v-for="list in lists">
        <td>{{list.id}}td>
        <td>{{list.name}}td>
      tr>
    table>
  div>

  <script src="./lib/vue.js">script>
  <script src="./lib/axios.js">script>
  <script>
    var vue = new Vue({
      el: '#app',
      data: {
        lists: []
      },
      methods: {
        // 前后端分离开发中,前端接收数据并渲染,后台只用提供json数据
        getList() {
            // 可以在本地新建一个json数据文件,用来测试ajax请求
          axios.get('http://localhost:8110/admin/edu/teacher').then(response => {
            console.log(response)
            // 后端接收的值交给前端的vue管理
            this.lists = response.data.data.items
          })
        }
      }
    })
  script>
[
    {"id":1,"name":"天才"},
    {"id":2,"name":"英子"},
    {"id":3,"name":"笔杆"}
]

将本地json文件中的数据(在实际中,应该是数据库中的数据),在前端页面进行结果显示

在浏览器中打开后,点击测试按钮:

Day42——Vue学习笔记_第8张图片


实战

ElementUI的例子https://github.com/PanJiaChen/vue-element-admin

项目:vue-element-admin-master

启动命令:npm run dev


Vue.js学习地址

不了解的知识还需在https://cn.vuejs.org/v2/guide/index.html多学习


补充webpack的学习

webpack是一个打包工具,需要将项目适配浏览器的特性
也学习下前端化工程的一些思想

使用VScode进行测试:

  • 编写一个hello.js,使用exports,才可将此部分导出至所要导入的主函数中
exports.sayHi = function(){
    document.write("

输出看看Hello

"
) };
  • 编写主程序main.js,使用require引入hello.js并定义变量,供下面使用其中方法
var hello = require("./hello");
hello.sayHi();
  • 建立webpack.config.js一个打包工具
module.exports = {
    entry:'./main.js',
    output:{
        filename:"./js/bundle.js"
    }
};
  • 使用管理员模式进入cmd,在cd到项目所在目录,输入webpack
D:\environment\41.20-3-2\Vue\nodejs\node-start>webpack

Day42——Vue学习笔记_第9张图片
成功之后,在VScode中可找到对应打包目录

  • 再建立一个index.html页面,里面导入刚打包的bundle.js文件,进行测试
<body>
    <script src="./dist/js/bundle.js"></script>
</body>
  • 在index.html文件中空白处鼠标右键,用live server 打开,就会在自己浏览器中显示!

你可能感兴趣的:(Day42——Vue学习笔记)