VUE基本介绍

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 网页引入mathjax,latex

    Dean0731
  • RSA

    Dean0731
  • 人工智能_3_机器学习_概述

    Dean0731
  • 教育平台项目前端:Vue.js 入门

    Vue.js 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用。

    RendaZhang
  • 前端基础-Vue.js模板语法(指令)

    指令 (Directives) 是带有 v- 前缀的特殊 特性 相当于自定义html属性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是...

    cwl_java
  • Vue.js模板方法

    俞其荣
  • Vue.js入门

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。

    Vincent-yuan
  • 可视化-bokeh-02-Django中部署

    系统:Windows 7 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3....

    zishendianxia
  • 前端进阶第6周打卡题目汇总

    不知不觉打卡群已经坚持一个半月了,希望能陪伴大家持续更长的时间,帮助更多的朋友提高前端水平。接下来赶快进入正题,总结一下第六周的打卡笔记。

    徐小夕
  • 基于Scrapy框架爬取厦门房价

    本文的运行环境是Win10,IDE是Pycharm,Python版本是3.6。 请先保证自己安装好Pycharm和Scrapy。

    潇洒坤

扫码关注云+社区

领取腾讯云代金券