VUE基本介绍

简介

构建界面的渐进式框架，替代jstl,el表达式等

案例

<div id="app">
    <!--{{}}插值表达式 -->
    {{messgae}}
</div>
<!--引入文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
    el:'#app',//绑定vue的作用范围
    data:{//
        message:'Hello'
    }
})
</script>

基本语法

基本数据与渲染指令

<div id="app">
    <!--v-bind指令 -->
    <h1 v-bind:title="message">
    	{{content}}
    </h1>
	<!--简写方式-->
    <h1 :title="message">
    	{{content}}
    </h1>
</div>
<script>
new Vue({
    el:'#app',
    data:{
    	conten:'标题'，
    	message:'时间'+new Data().toLocalString()
	}
})
</script>

双向数据绑定

<div id="app">
    <!--单向绑定-->
    <input type='text' v-bind:value='searchMap.keyWord'/>
    <!--双向绑定，修改后原数据也会变化s-->
    <input type='text' v-model='searchMap.keyWord'/>
    <p>{{searchMap.keyWord}}</p>
</div>
<script>
new Vue({
    el:'#app',
    data:{
        searchMap:{
            keyWord:'Dean'
        }
    }
})
</script>

事件绑定

<div id="app">
    <!--vue绑定事件-->
    <button v-on:click='search()'>查询</button>
    <!--简写，可不加括号-->
    <button @click='search()'>查询</button>
</div>
<script>
new Vue({
    el:'#app',
    data:{
        
    },
    methods:{//定义方法
        search(){alert('search...')}。
        f1(){alert('f1')}
    }
    
})
</script>

修饰符

<div id="app">
    <form action="save" v-on:submit.prevent='onSubmit'>
        <input type="text" id="name" v-model='user.name'/>
        <button type="submit">
         保存   
        </button>
        <!--点击后不提交，而是执行方法-->
    </form>
</div>
<script>
new Vue({
    el:'#app',
    data:{
    	user:{}    
    }，
    methods:{
    	soSubmit(){
    		if(this.user.name){
                
			}else{
                
            }
		}
	}
})
</script>

条件渲染

<div id="app">
    <input type="checkbox" v-model='ok'/> 是否同意
    <h1 v-if='ok'>ok</h1>
    <h1 v-else>not ok</h1>
</div>
<script>
new Vue({
    el:'#app',
    data:{
        ok:false
    }
})
</script>

循环

<ul>
    <li v-for="n in 10">{{n}}</li>
</ul>
<ul>
    <!--index索引值从0开始，必须在n后边-->
    <li v-for="(n,index) in 10">{{n}}-{{index}}</li>
</ul>

<div id="app">
    <tr v-for="user in users">
    	<td>{{user.id}}</td>
        <td>{{user.name}}</td>
    </tr>
</div>
<script>
new Vue({
    el:'#app',
    data:{
  		users:[
            {id:1,name:'Dean'},
            {id:1,name:'Dean'},
        ]      
    }
})
</script>

组件

<div id="app">
    
</div>
<script>
new Vue({
    el:'#app',
    data:{},
    components:{
        // 组件名字
        'Navbar':{
            // 组件内容
            template:'<ul><li>首页</li></ul>'
        }
    }
})
</script>
<Navbar></Navbar>
<!--定义全局组件-->
<script>
Vue。component('Navbar',{
    template:'xxx'
})
</script>

生命周期

渲染之前created，之后mounted

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

路由

<div id="app">
    <h1>Hello</h1>
    <p>
        <router-link to="/a">xx</router-link>
        <router-link to="/b">xx</router-link>
    </p>
    <router-view></router-view>
</div>
<script src="vue.min.js"></script>
<script src="vue.router.min.js"></script>
<script>
    const routes=[
        {path:'/a',component:定义的template}，
    ]
    const router = new VueRouter({routes})
const app = new Vue({
    el:'#app',
    router
})
</script>

Axios

• 独立于Vue的项目，与Vue一起使用实现ajax请求

• 应用场景

• 使用

  • 引入vue.js,axios.min.js
  • 编写axios代码

  <script>
  new Vue({
  	data:{//定义变量初始值
  		//定义变量
          userlist:[]
          
  	},
  	created(){//调用定义方法
  		this.getUserList()
  	},
  	methods:{//编写具体方法
  		getUserList(){
              axios.get("http://xxxx")
              .then(//请求成功执行
                  response=>{  //箭头函数
                  	//response 就是返回的数据
                      this.userList= response.data
                  }
              ) 
              .catch(同上)//请求失败
          }
  	}
  })
  </script>
  

element-ui

饿了么提供的组件库，各种效果,

http://element-cn.eleme.io

node.js

• java需要jdk，javascript需要nodejs
• 可模拟服务器如tomcat

const http=require('http');
http.createServer(function(request,response){
    response.writeHead(200,{'Content-Type':'text/plain'});;
    response.end('Hello Server')
}).listen(8888);

npm

类似于java中的maven，

详细见：https://www.cnblogs.com/Dean0731/p/12956891.html

babel

转码器,将es6转化为es5

# 第一步
npm install --g babel-cli
babel --version
# 第二步，创建js
# 第三部，创建'.babelrc'文件,名字固定
{
	"presets":["es2015"],
	"plugins":[]
}
# 第四部，安装转码器
npm install --s babel-preset-es2015
# 第五步, 文件夹转码
babel src --out-dir dist2
babel src -d dist
# 文件转码
babel xxx.js -o| --out-file yy.js

模块化

1. 是什么？

   • 后端：controller，service，mapper，类与类之间调用叫做模块化
   • 前端：js与js之间的调用

2. es6模块化

   不能再nodejs运行，需要babel转化为es5

   方法一

   // 01.js
   export function getList(){}
   // 02.js
   import {getList} from './01.js'
   getList() //调用
   

   方法二

   // 01.js
   export  default{
       getList(){},
       update(){}
   }
   // 02.js
   import m from './01.js'
   m.getList()
   

3. es5模块化

// 01.js
const sum = function(a,b){
    return parseInt(a)+parseInt(b)
}
const subtract = function(a,b){
    return parseInt(a)-parseInt(b)
}
// 简写
module.exports={
    sum,subtract
}
module.exports={
    sum:sum,
    sub:subtract
}

// 02.js
const m = require('01.js')
m.sum(a,b)

webpack

静态资源打包工具，将静态资源打包为一个

例：1.js 2.js 3.css ---->webpack ---->folder.js ,减少页面请求次数

npm install -g webpack webpack-cli

js打包

//01.js
xxxx
//02.js
xxxx
// main.js
const x = require('01.js')
const y = require('02.js')
x.zzz
y.zzzz

// webpack.config.js 固定名字
const path=require('path') // Nodejs内置模块
module.exports={
    entry:'main.js',//配置入口文件
    output:{
        path:path.resolve(__dirname,'dist'), // 输出路径
        filename:'bundle.js' //文件名
    }
}

webpack # 有黄色警告 一行显示
webpack --mode=production
webpack --mode=none
webpack --mode=development # 没有警告,多行显示

css打包

// 01.css
xxxx
// main.js中
require('01.css')
// 安装css加载器
npm install -s style-loader css-loader
// 修改webpack配置文件

const path=require('path') // Nodejs内置模块
module.exports={
    entry:'main.js',//配置入口文件
    output:{
        path:path.resolve(__dirname,'dist'), // 输出路径
        filename:'bundle.js' //文件名
    }，
    module:{
    	rules:[
    		{
    			test:/\.css$/,//打包规则应用到css结尾的文件
    			use:['style-loader','css-loader']
			}
    	]
	}
}

# 重新打包即可

后台模板vue-admin-template

• 下载，解压到工作区，https://github.com/PanJiaChen/vue-element-admin
• 进入目录 npm install 安装依赖
• 启动 npm run dev

注：后台=接口(java)+管理员界面(nodejs)，前台：用户界面(nodejs)