nodejs,npm,vue入门及双向绑定

最新推荐文章于 2024-07-18 10:43:28 发布

.墨迹.

最新推荐文章于 2024-07-18 10:43:28 发布

阅读量335

点赞数

分类专栏： vue 文章标签： vue nodejs

本文链接：https://blog.csdn.net/y18791050779/article/details/105070769

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

工具下载VsCode：https://code.visualstudio.com/无脑安装
下载NodeJS:http://nodejs.cn/download/
node -v npm -v查看是否安装完毕

1.NodeJS

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

3.导入汉化包，安装live sever
3. 新建一个自己要使用的文件夹，复制路径在主界面打开在这里插入图片描述

node 程序，发送数据到前端界面，右键点击在终端中打开
注意写完代码一定要保存，否则无法编译

入门

const http = require('http')
http.createServer(function(request,response){
    response.writeHead(200,{'Content-Type': 'text/plain'})
   
    response.end('hello,server')}
    ).listen(8080)
console.log("server is running ... port:8080")

在这里插入图片描述
在浏览器上访问8080端口

2.npm

npm：前端版的maven
maven中的依赖是pom.xml
nom中的依赖是package-lock.json

npm init -y 初始化一个基本的配置文件
# 自动更新目前所有的依赖，拿到一个程序后，不会打包这些依赖，我们需要自己让他自动导包
npm install 
# 安装环境 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 jquery@3.4.1

# --save-dev 或 -D 代表这个只在开发环境中有效，不会打包出去
# --save-dev 或 -D 开发时候的语法检测工具
npm install --save-dev eslint
npm install -D eslint

# 自动下载项目中的依赖package.jsonnpm 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

4.Vue入门及双向绑定

vue是前端框架，核心只关心视图层

下载npm install vue
MMVM

M：模型数据
V：视图
VM：双向绑定，前端实时更新

例子一：新建html文件

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

<script src="./lib/vue.js"> </script>

<script>
        var vue = new Vue({
                el:'#app',
                data:{
                msg:'hello,vue'
                }
                })
</script>
</body>
</html>

右键点击open with live server 即可在浏览器中打开

例子二：基本数据渲染

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

<h1 :title="msg">我是标题</h1>
</div>

<script src="./lib/vue.js"> </script>

<script>
       var vue = new Vue({
               el:'#app',
               data:{
               msg:'时间'+ new Date().toLocaleString()
               }
               })
</script>
</body>
</html>

例三:双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<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:'yangkaibo'
                }
                }
                })
</script>
</body>
</html>

vue事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="search()">查询</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:{
                  serachMap:{
                  keyword:'yangkaibo'
                  },

                  result:{}
                  },
                  methods:{//事件
                  search(){
                  console.log("search")

                  this.result={
                  "title":"yang",
                  "site":"https://baidu.com"
                  }
                  }
                  }
                  })
</script>
</body>
</html>

在这里插入图片描述

点击yang后会发生跳转，也就是重定向

vue路由

用路由就可以实现页面内跳转。
下载vue和vue-router

npm install vue
npm install vue-router

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">

<h1>hello,app</h1>

<router-link to="/">首页</router-link>
<router-link to="/student">爱人</router-link>
<router-link to="/teacher">亲人</router-link>

<router-view></router-view>
</div>

<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>


<script>

      const welcome = {template:'<div>欢迎</div>'}
              const student = {template:'<div>Student List/div>'}
              const teacher = {template:'<div>Teacher List</div>'}

              const routes = [
              {path:'/', redirect:'/welcome'},
              {path:'/welcome',component:welcome},
              {path:'/student',component:student},
              {path:'/teacher',component:teacher},

              ]



              const router = new VueRouter({
              routes: routes
              })

              new Vue({
              el:'#app',
              router
              })
</script>


</body>
</html>