皮糖小王子
皮糖小王子

自学Vue之路——Vue介绍及基本语法

今日内容概要

  • 前端发展介绍
  • Vue的快速使用
  • 插值语法
  • 指令系统之文本指令
  • 指令系统之事件指令
  • 指令系统之属性指令

前端发展介绍

  • HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES13)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
  • ECMA标准
  • JavaScript=ECMA+bom+dom
  • Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
  • 单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
  • Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）
  • React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）
  • 移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端
  • 一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端
  • 在Vue框架的基础性上 uni-app：一套编码 编到10个平台
  • Vue:2.x 3.x
    ts：typescript
    less

Vue的快速使用

1.概念
Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。
渐进式框架：
可以一点一点的使用它，只用一部分，也可以整个工程都使用它。

2.M-V-VM思想
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式。

  • Model：vue对象的data属性里面的数据，这里的数据要显示到页面中；
  • View：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板”；
  • ViewModel：vue编写代码时的vm对象，它是vue.js的核心，连接View和Model数据的中转，保证视图和数据的一致性。（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）
    在这里插入图片描述

3.组件化开发，单页面开发

  • 组件化开发
    类似于DTL中的include，每一个组件的内容都可以被替换和利用。
    自学Vue之路——Vue介绍及基本语法_第1张图片
    有自己独立的html，css，js
  • 单页面开发
    只需要一个页面，结合组件化开发来替换页面中的内容；
    页面的切换只是组件的替换。

4.Vue引入方式

  • CDN的方式引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 下载后导入
    其实就是直接在浏览器中打开https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后复制下来，创建一个js文件再粘贴进去
<script src="js/vue.js"></script>

5.简单使用

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="js/vue.js">script>
<body>
<div id="app01">
   <h1>vue快速使用h1>
   <p>名字：{{name}}p>
   <p>年龄：{{age}}p>
div>
body>
<script>
   // 引入vue后，会有vue的构造函数，传入配置项对象
   // 页面中id为app的div就被vue托管了，在div中就可以写vue的语法，指令
   var vm = new Vue({
       el:"#app01",
       data:{
           name:'lqz',
           age:19
       },
   })
script>
html>

插值语法

1.语法

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="js/vue.js">script>
<body>
<div id="app01">
   <h1>vue快速使用h1>
   <p>名字：{{name}}p>
   <p>年龄：{{age}}p>
   <p>爱好：{{hobby}}p>
   <p>第0个爱好：{{hobby[0]}}p>
   <p>obj1：{{obj1}}p>
   <p>obj1的名字：{{obj1['name']}}p>
   <p>obj1的年龄：{{obj1.age}}p>
   <p>标签：{{link1}}p>


   <h1>vue插值渲染简单表达式h1>
   <p>{{10>9?'大于':'小于'}}p>
   <p>{{age + 1}}p>

div>
body>
<script>
   // 引入vue后，会有vue的构造函数，传入配置项对象
   // 页面中id为app的div就被vue托管了，在div中就可以写vue的语法，指令
   var vm = new Vue({
       el:"#app01",
       data:{
           name:'lqz',      // 字符串
           age:19,        // 数值
           hobby:['唱','跳','rap','篮球'],   // 数组
           obj1:{name:'kk',age:26},         // 对象
           link1:'百度一下'
       },
   })
   // 三目运算符（相当于python中的三元表达式）
   var a = 10 > 9 ? '大于' : '小于'
script>
html>

自学Vue之路——Vue介绍及基本语法_第2张图片

指令系统之文本指令

1.概念
写在[任意]标签上，以v-xx开头的，都是vue的指令。
2.文本指令

指令 释义
v-html 让HTML渲染成页面
v-text 标签内容显示js变量对应的值,如果之前有数据覆盖掉
v-show 放一个布尔值：为真标签就显示；为假标签就不显示
v-if 放一个布尔值：为真标签就显示；为假标签就不显示

vi-show与v-if的区别：
v-show：标签还在，只是不显示了（display:none）
v-if：直接操作DOM，删除/插入标签

3.代码展示

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="js/vue.js">script>
<body>
<div id="app01">

   <h1>文本指令 v-texth1>
   <p v-text="name">cqgp>


   <h1>文本指令 v-htmlh1>
   <span v-html="a">span>


   <h1>文本指令 v-showh1>
   <img v-show='b' >src="https://www.keaitupian.cn/cjpic/frombd/1/253/967204653/61677996.jpg" alt="" width="300px" height="300px">

   <h1>文本指令 v-ifh1>
   <div v-if="b1">
       <a href="">点我拿头像a>
   div>
div>
body>
<script>
   // 引入vue后，会有vue的构造函数，传入配置项对象
   // 页面中id为app的div就被vue托管了，在div中就可以写vue的语法，指令
   var vm = new Vue({
       el:"#app01",
       data:{
           name:'lqz',
          a:'点我',
           b:true,
           b1:true
       },
   })
script>
html>

指令系统之事件指令

1.事件指令

指令 释义
v-on 放在标签上：v-on:事件名=‘函数’
@ v-on:事件名=‘函数’ 简写成 @事件名=‘函数’

事件名可以写：click，dbclick
input标签：change，blur，input

2.补充------es6对象写法：

var name = 'lqz'
var age = 19
var obj = {name,age,handleClick() {} }

3.代码展示

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="js/vue.js">script>
<body>
<div id="app01">
   <h1>事件指令h1>
   <button v-on:click="handleShow">点我显示消失button>
   <div v-if="show">
       <img src="https://www.keaitupian.cn/cjpic/frombd/1/253/967204653/61677996.jpg" alt="" width="300px" height="300px">
   div>

   <h1>事件指令函数带参数h1>
   <button @click="handleClick">函数需要参数，但是没有传，默认会把event事件传入button>
   <br>
   <button @click="handleClick1('lqz')">函数需要参数传值，但是传值了button>
   <br>
   <button @click="handleClick2('lqz')">函数需要3个参数，但是只传了1个button>
   <br>
   <button @click="handleClick3($event,'lqz')">函数需要2个参数，一个传了事件，一个传字符串button>
div>
body>
<script>
   // 引入vue后，会有vue的构造函数，传入配置项对象
   // 页面中id为app的div就被vue托管了，在div中就可以写vue的语法，指令
   var vm = new Vue({
       el:"#app01",
       data:{
           show:true,
       },
       methods:{
           handleShow(){
               this.show = !this.show
           },
           // 需要一个参数，但是没有传给它，默认会把事件传入
           handleClick(a){
               console.log(a)
               alert('帅哥')
           },
           // 需要一个参数，传了一个，但是需要传数字，字符串，布尔值或变量
           handleClick1(name){
               console.log(name)
           },
           // 需要3个参数，只传了一个，没有问题，后面两个都是undefined
           handleClick2(a,b,c){
              console.log(a)
               console.log(b)
               console.log(c)
           },
           // 函数需要2参数，一个事件，一个字符串
           handleClick3(event,name){
               console.log(event)
               console.log(name)
           }
       }
   })
script>
html>

指令系统之属性指令

1.事件指令

指令 释义
v-bind v-bind:属性名=‘变量’
: v-bind:属性名=‘变量’ 简写成 :属性名=“变量”

写在标签上的 name，class,href,src,id…属性

=2.代码展示

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="js/vue.js">script>
<body>
<div id="app01">
   <h1>属性指令h1>
   <button @click="handleClick">点我看心仪头像button>
   <br>
   <img v-bind:src="url" alt="" width="300px" height="300px">
   <hr>
   <button @click="handleChange">点我换头像button>
   <br>
   <img :src="img_url1" alt="" width="300px" height="300px">
   <hr>
   <button @click="handleMake">点我自动选头像button>
   <br>
   <img :src="img_url2" alt="" width="300px" height="300px">
   <hr>


div>
body>
<script>
   var vm = new Vue({
       el: "#app01",
       data: {
           url: 'https://www.keaitupian.cn/cjpic/frombd/1/253/967204653/61677996.jpg',
           img_url1: 'https://www.keaitupian.cn/cjpic/frombd/0/253/2854577671/1628103470.jpg',
           img_url2: 'https://www.keaitupian.cn/cjpic/frombd/1/253/967204653/61677996.jpg',
           imgList: ['https://image.haoning.org.cn/tuba/2022-08-19/59690193315.jpg',
               'https://image.haoning.org.cn/tuba/2022-08-19/59691193315.jpg',
               'https://image.haoning.org.cn/tuba/2022-08-19/59693193316.jpg',
               'https://image.haoning.org.cn/tuba/2022-08-19/59695193317.jpg',
               'https://image.haoning.org.cn/tuba/2022-08-19/59698193317.jpg',
               'https://image.haoning.org.cn/tuba/2022-08-19/59699193318.jpg',
               'https://image.haoning.org.cn/tuba/2022-08-19/59700193318.jpg',
               'https://image.haoning.org.cn/tuba/2022-08-19/59701193318.jpg']
       },
       methods: {
           handleClick() {
               this.url = 'https://www.keaitupian.cn/cjpic/frombd/0/253/2854577671/1628103470.jpg'
           },
           handleChange() {
               //floor：只取整数部分
               //Math.random()生成0---1之间的数字，小数
               var i = Math.floor(Math.random() * this.imgList.length)
               console.log(i)
               this.img_url1 = this.imgList[i]
           },
           handleMake() {
               setInterval(() => {
                   var i = Math.floor(Math.random() * this.imgList.length)
                   this.img_url2 = this.imgList[i]
               }, 1000)
           },
           // mounted(){
           //     //项目加载完，开启一个定时器，每隔2秒干函数内容，函数里面在变化变量
           //     setInterval(() => {
           //         var i = Math.floor(Math.random() * this.imgList.length)
           //         this.img_url2 = this.imgList[i]
           //     },2000)
       }
   })

script>
html>

你可能感兴趣的:(Vue框架学习,1024程序员节)

  • v-for 实例 琪33
    v-for实例v-for实例{{item}}{{index+1}}：{{student.name}}-{{student.age}}varapp=newVue({el:'#app',data:{items:[53,23,76,14,54,36,28],students:[{name:'jspang',age:32},{name:'Panda',age:30},{name:'PanPaN',age:
  • npm 搭建 Vite 项目 渺小的虫子 viter前端javascript开发语言
    兼容性注意Vite需要Node.js版本>=12.0.0。1、使用npm安装Viter$npminitvite@latest使用npm初始化项目#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+,需要额外的双横线：npminitvite@latestmy-vue-app----templatevue2、配置路由：npminstallvue-
  • vue 通信方式 hx_1199 vue.js前端
    1、props和$emit父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过$emit触发事件来做到的。父组件this.$emit("update:page",newVal)-->importChildfrom'./child'exportdefault{name:"Father",components:{Child,},data(){return{articleList:['
  • VUE 页面禁止缩放（华为平板浏览器可能失效） 唐屁屁儿 JSvuewebviewjavascript
    h5页面移动端禁止缩放、web页面禁止浏览器缩放移动端优先，可禁止用户缩放和双击放大；在App.vue中的script内的方法里加入以下代码：window.onload=function(){document.addEventListener('touchstart',function(event){if(event.touches.length>1){event.preventDefault()
  • Vue 常见面试题(一) 安生生申 面试题vue.js前端javascript
    目录1、Vue的最大的优势是什么？（必会）2、Vue和jQuery两者之间的区别是什么？（必会）3、MVVM和MVC区别是什么？哪些场景适合？（必会）1、基本定义2、使用场景3、两者之间的区别4、Vue数据双向绑定的原理是什么?（必会）5、Object.defineProperty和Proxy的区别（必会）6、Vue生命周期总共分为几个阶段？（必会）7、第一次加载页面会触发哪几个钩子函数？（必会）
  • react native 总结 一切顺势而行 reactnativereact.jsjavascript
    reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su
  • Vue 模版编译原理 I will.874 vue.jsjavascript前端
    当我们使用Vue编写完一个组件以后，Vue会根据模版编译一个render函数，调用render函数生成虚拟DOM，然后将虚拟DOM映射成真实DOM当数据发生变化时，Vue会触发更新视图，调用render函数返回新的虚拟DOM，对比新旧虚拟DOM，修改真实DOM，从而更新页面在此期间，有以下4个关键步骤：模版编译。生成渲染函数render执行render函数生成虚拟DOM首次渲染，根据虚拟DOM生成
  • reactive和ref的异同、toRef和toRefs的使用 Niucode vue3vue.js前端javascript
    一、reactive和ref有了reactive为什么还要ref？ref处理起基本数据类型来更加的方便快捷，性能要更好。ref内部值的变化只会触发订阅它的副作用函数（effect）更新，而reactive（Proxy）内部对象的任何属性变化都会触发整个对象的重新渲染。相同点：都是Vue3提供的用于创建响应式数据的函数；在组件中都能够触发视图更新，实现数据的双向绑定。不同点：数据类型：reactiv
  • 程序员开发技术整理 laizhixue 学习前端框架
    前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
  • 基于SSM+Vue企业销售培训系统 企业人才培训系统 企业课程培训管理系统 企业文化培训班系统Java 计算机程序老哥
    作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个
  • vue 在style标签中引入js变量控制样式 古迪红尘 VUEvue.jsjavascript前端
    1.基本的绑定样式示例data(){return{colorData:'blue',}}详细用法可参考下面的博客：https://www.jianshu.com/p/2b82ee1e6199
  • Vue：为什么要使用v-cloak 刻刻帝的海角 vue.js前端javascript
    Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu
  • vue生命周期 涡看你就不是好人呐 vue.jsjavascript前端
    1.computed是在HTMLDOM加载后马上执行的，如赋值；2.methods则必须要有一定的触发条件才能执行，如点击事件；3.watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再wa
  • Vue 发送Ajax请求多种方式 Red丶哞 前端vue.jsajax前端
    1.发送ajax请求的方式方案一：jq的ajax（在vue中不推荐同时使用）方案二：js原始官方fetch方法方案三：axios第三方2.方案一后端视图函数fromrest_framework.viewsetsimportViewSetfromrest_framework.responseimportResponseclassIndex(ViewSet):defindex(self,request
  • vue时间组件：dayjs与moment 煸橙干儿~~ VUE实战vue.js前端javascript
    一、dayjs使用Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。具体使用可参考：dayjs官网1、本年start=dayjs().startOf('year').format('YYYY-MM-DD')end=dayjs().endOf('year').format('YYYY-MM-DD')console.log(start,end)//['2
  • vue3中使用过渡动画transition 前端小趴菜05 css
    //appear表示一进入页面就使用动画hello.slide-enter-active,//进入动画的生效状态.slide-leave-active{//离开动画的生效状态transition:all0.5sease;}.slide-enter-from,//进入动画开始状态.slide-leave-to{//离开动画结束状态height:0px!important;}.slide-enter-
  • blog-engine-06-pelican 静态网站生成 支持 markdown 和 reST 语法 老马啸西风 java
    拓展阅读blog-engine-01-常见博客引擎jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman对比blog-engine-02-通过博客引擎jekyll构建githubpages博客实战笔记blog-engine-02-博客引擎jekyll-jekyll博客引擎介绍blog-engine-02-博客引擎jekyll-jekyl
  • 在Vue中组件和组件之间的通信有哪些？ qingyun989 vue.js
    1.父向子传数据？props2.子向父传数据？第一种方式：父向子传一个函数，子接收这个函数，然后子去调用这个函数，通过这个函数向子传数据第二种方式：组件的自定义事件绑定事件：负责接收数据触发事件：负责发送数据3.可以完成所有组件之间的数据，包括：兄弟之间、爷孙之间、但不限于这些全局事件总线4.怎么选择呢？父向子：props子向父：自定义事件其他的关系使用全局事件总线
  • mineadmin使用docker启动方式 qq_38812523 dockerphp容器
    找个目录,git下来mineadmin代码,在根目录,创建文件名docker-compose.yml然后复制下面代码version:'3'services:#首先下载前端，https://gitee.com/mineadmin/mineadmin-vue#在后端根目录建立mine-ui目录，把前端文件复制过来。#容器内访问宿主机的地址用：host.docker.internal#宿主机也可以在ho
  • vue-pdf 预览pdf (数据流) reembarkation vue.jspdfjavascript
    页面有个要预览pdf的需求，数据是从后台传递过来的数据流：1.安装插件：npminstallvue-pdf2.在页面引用：importpdffrom'vue-pdf'...components:{pdf},3.html中添加：4.通过接口获取数据：downloadFile({id:this.id}).then((res)=>{if((!res&&res.status!=200)||(res.dat
  • js封装SDK 在VUE、小程序、公众号直接调用js调用后端接口（本文以vue项目为例） 祝你今天也快乐 jsvuejavascriptvue.js小程序
    1.封装一个js文件msgSdk.js注意：需要修改这个请求地址apiServiceAddress;(function(){if(window.msgSdk){return}varmsgSdk=(function(){varm_msgSdk=thisvarapiServiceAddress="http://172.12.14.5:8000"this.I_SendHTTPRequest=functi
  • 【Vue】elementUI-MessageBox组件相关 SZnA1 vue.jselementui前端
    官方代码：点击打开MessageBoxexportdefault{methods:{open(){this.$confirm('此操作将永久删除该文件,是否继续?','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}).then(()=>{this.$message({type:'success',message:'
  • 基于nodejs+vue智慧农业小程序python-flask-django-php QQ_1963288475 pythonvue.js小程序flaskdjangophpnode.js
    根据此问题，研发一套智慧农业小程序，既能够大大提高信息的检索、变更与维护的工作效率，也能够方便微信小程序的管理运用，从而减少信息管理成本，提高效率。该微信小程序主要设计并完成了管理过程中的用户注册登录、个人信息修改、用户信息、知识科普、土壤信息、水质信息、购物商城等功能。该微信小程序操作简便，界面设计简洁，不但可以基本满足本行业的日常管理工作，同时又可以有效减少人员成本和时间成本，为智慧农业管理工
  • nodejs+vue的街道办管理系统python-flask-django-php QQ_1963288475 pythonvue.jsflaskdjangophpnode.js
    在此基础上，结合现有街道办管理体系的特点，运用新技术，构建了以nodejs为基础的街道办管理信息化管理体系。首先，以需求为依据，根据需求分析结果进行了系统的设计，并将其划分为管理员和用户二种角色和多个主要模块：用户、住户信息、流动人口、住户居住、住户迁出、缴费信息、投诉维修理、处理信息、评价评分、核酸采样、预约信息等。使用目前市场主流的技术express框架进行项目构建，基于MVC开发模式，使用n
  • vue动态获取本地图片 浅墨_东 vue.jsjavascript前端
    最近在复习插槽有关知识的时候，遇到一个问题。我想把本地图片动态的展示到页面上，却实现不了。后来搜索了很多有关这方面的知识，才得到了解决。展示错误情况（一）直接使用相对路径importChildfrom'./components/child.vue'exportdefault{data(){return{list:[{name:'小明',avatar:'@/assets/剑士.jpg'},{name
  • vue3 + Element + nodejs 大文件上传、断点续传 ZL随心 vue.js前端javascript
    前言大文件上传，一般时间都比较长，这么长的时间内，可能会出现各种各样的问题，比如断网，一旦出错，我们的文件就需要重新上传，这样造成资源浪费，如果我们使用了断点续传继续就不会造成资源浪费了，因为当出现错误的时候，我们再重新上传文件，就会从我们出现错误的地方开始上传了，对于出错前上传的内容就不用再上传了，对于已经上传过的文件，就可以实现秒传的效果了。完整仓库地址流程1、上传方法constonUploa
  • 如何快速上手Vue框架? 山间漫步人生路 vue.js前端框架vue.js
    要快速上手Vue框架，可以按照以下步骤进行：一、准备工作了解Vue：Vue是一个构建用户界面的渐进式框架，核心库只关注视图层。环境准备：安装Node.js和npm，这是Vue开发的基础环境。二、安装Vue全局安装VueCLI：使用npm全局安装VueCLI，它是一个基于Vue.js进行快速开发的完整系统。npminstall-g@vue/cli三、创建Vue项目使用VueCLI创建新项目：vuec
  • 基于python+vue高校毕业生离校管理系统flask-django-php-nodejs QQ511008285 pythonvue.jsflaskdjangonode.jsphp
    课题主要采用Uni-weixin、django架构技术，前端以小程序页面呈现给用户，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生、教务人员、宿管员、图书管理员、财务人员、离校申请、物流信息、钥匙归还、图片归还、欠费信息、催缴信息等功能，从而实现智能化的管理方式，提高工作效率。关键字：高校毕业生离校管理系统；django框架；MySQL数据库语言：
  • Vue项目使用process.env关键字及Vue.config.js配置解决前端跨域问题 百思不得小李 JS实战记录vue2实战记录javascript前端vue.js
    1.process.env是Node.js中的一个环境1.打开命令行查看环境：2.process.env与VueCLI项目VueCli有以下三种运行模式development模式用于vue-cli-serviceservetest模式用于vue-cli-servicetest:unitproduction模式用于vue-cli-servicebuild和vue-cli-servicetest:e2
  • vue项目报错，npm install 报错 m87里的光 vue.jsnpm前端
    1.报错问题：npmERR!cb()nevercalled!npmERR!Thisisanerrorwithnpmitself.Pleasereportthiserrorat:npmERR!9npmERR!Acompletelogofthisruncanbefoundin:npmERR!C:\Users\AdministratorAppDataRoamingnpm-cachelogs2020-12
  • scala的option和some 矮蛋蛋 编程scala
    原文地址： http://blog.sina.com.cn/s/blog_68af3f090100qkt8.html 对于学习 Scala 的 Java™ 开发人员来说，对象是一个比较自然、简单的入口点。在 本系列 前几期文章中，我介绍了 Scala 中一些面向对象的编程方法，这些方法实际上与 Java 编程的区别不是很大。我还向您展示了 Scala 如何重新应用传统的面向对象概念，找到其缺点
  • NullPointerException Cb123456 androidBaseAdapter
        java.lang.NullPointerException: Attempt to invoke virtual method 'int android.view.View.getImportantForAccessibility()' on a null object reference     出现以上异常.然后就在baidu上
  • PHP使用文件和目录 天子之骄 php文件和目录读取和写入php验证文件php锁定文件
    PHP使用文件和目录 1.使用include()包含文件 (1)：使用include()从一个被包含文档返回一个值 (2)：在控制结构中使用include()   include_once()函数需要一个包含文件的路径，此外，第一次调用它的情况和include()一样，如果在脚本执行中再次对同一个文件调用，那么这个文件不会再次包含。   在php.ini文件中设置
  • SQL SELECT DISTINCT 语句 何必如此 sql
    SELECT DISTINCT 语句用于返回唯一不同的值。 SQL SELECT DISTINCT 语句 在表中，一个列可能会包含多个重复值，有时您也许希望仅仅列出不同（distinct）的值。 DISTINCT 关键词用于返回唯一不同的值。 SQL SELECT DISTINCT 语法 SELECT DISTINCT column_name,column_name F
  • java冒泡排序 3213213333332132 java冒泡排序
    package com.algorithm; /** * @Description 冒泡 * @author FuJianyong * 2015-1-22上午09:58:39 */ public class MaoPao { public static void main(String[] args) { int[] mao = {17,50,26,18,9,10
  • struts2.18 +json,struts2-json-plugin-2.1.8.1.jar配置及问题！ 7454103 DAOspringAjaxjsonqq
    struts2.18  出来有段时间了！ （貌似是 稳定版）   闲时研究下下！  貌似 sruts2 搭配 json 做 ajax 很吃香！   实践了下下！ 不当之处请绕过！ 呵呵   网上一大堆 struts2+json  不过大多的json 插件 都是 jsonplugin.34.jar   strut
  • struts2 数据标签说明 darkranger jspbeanstrutsservletScheme
    数据标签主要用于提供各种数据访问相关的功能，包括显示一个Action里的属性，以及生成国际化输出等功能 数据标签主要包括： action ：该标签用于在JSP页面中直接调用一个Action，通过指定executeResult参数，还可将该Action的处理结果包含到本页面来。 bean ：该标签用于创建一个javabean实例。如果指定了id属性，则可以将创建的javabean实例放入Sta
  • 链表.简单的链表节点构建 aijuans 编程技巧
    /*编程环境WIN-TC*/ #include "stdio.h" #include "conio.h" #define NODE(name, key_word, help) \  Node name[1]={{NULL, NULL, NULL, key_word, help}} typedef struct node {  &nbs
  • tomcat下jndi的三种配置方式 avords tomcat
    jndi(Java Naming and Directory Interface，Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。命名服务将名称和对象联系起来，使得我们可以用名称 访问对象。目录服务是一种命名服务，在这种服务里，对象不但有名称，还有属性。          tomcat配置
  • 关于敏捷的一些想法 houxinyou 敏捷
    从网上看到这样一句话：“敏捷开发的最重要目标就是：满足用户多变的需求，说白了就是最大程度的让客户满意。” 感觉表达的不太清楚。 感觉容易被人误解的地方主要在“用户多变的需求”上。 第一种多变，实际上就是没有从根本上了解了用户的需求。用户的需求实际是稳定的，只是比较多，也比较混乱，用户一般只能了解自己的那一小部分，所以没有用户能清楚的表达出整体需求。而由于各种条件的，用户表达自己那一部分时也有
  • 富养还是穷养，决定孩子的一生 bijian1013 教育人生
    是什么决定孩子未来物质能否丰盛？为什么说寒门很难出贵子，三代才能出贵族？真的是父母必须有钱，才能大概率保证孩子未来富有吗？-----作者：@李雪爱与自由 事实并非由物质决定，而是由心灵决定。一朋友富有而且修养气质很好，兄弟姐妹也都如此。她的童年时代，物质上大家都很贫乏，但妈妈总是保持生活中的美感，时不时给孩子们带回一些美好小玩意，从来不对孩子传递生活艰辛、金钱来之不易、要懂得珍惜
  • oracle 日期时间格式转化 征客丶 oracle
    oracle 系统时间有 SYSDATE 与 SYSTIMESTAMP； SYSDATE：不支持毫秒，取的是系统时间； SYSTIMESTAMP：支持毫秒，日期，时间是给时区转换的，秒和毫秒是取的系统的。 日期转字符窜： 一、不取毫秒： TO_CHAR(SYSDATE, 'YYYY-MM-DD HH24:MI:SS') 简要说明， YYYY 年 MM   月
  • 【Scala六】分析Spark源代码总结的Scala语法四 bit1129 scala
    1. apply语法   FileShuffleBlockManager中定义的类ShuffleFileGroup，定义：   private class ShuffleFileGroup(val shuffleId: Int, val fileId: Int, val files: Array[File]) { ... def apply(bucketId
  • Erlang中有意思的bug bookjovi erlang
      代码中常有一些很搞笑的bug，如下面的一行代码被调用两次（Erlang beam） commit f667e4a47b07b07ed035073b94d699ff5fe0ba9b Author: Jovi Zhang <[email protected]> Date: Fri Dec 2 16:19:22 2011 +0100 erts:
  • 移位打印10进制数转16进制-2008-08-18 ljy325 java基础
    /** * Description 移位打印10进制的16进制形式 * Creation Date 15-08-2008 9:00 * @author 卢俊宇 * @version 1.0 * */ public class PrintHex { // 备选字符 static final char di
  • 读《研磨设计模式》-代码笔记-组合模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; abstract class Component { public abstract void printStruct(Str
  • 利用cmd命令将.class文件打包成jar chenyu19891124 cmdjar
    cmd命令打jar是如下实现： 在运行里输入cmd，利用cmd命令进入到本地的工作盘符。(如我的是D盘下的文件有此路径 D:\workspace\prpall\WEB-INF\classes) 现在是想把D:\workspace\prpall\WEB-INF\classes路径下所有的文件打包成prpall.jar。然后继续如下操作： cd D: 回车 cd workspace/prpal
  • [原创]JWFD v0.96 工作流系统二次开发包 for Eclipse 简要说明 comsci eclipse设计模式算法工作swing
                           JWFD v0.96 工作流系统二次开发包 for Eclipse 简要说明     &nb
  • SecureCRT右键粘贴的设置 daizj secureCRT右键粘贴
    一般都习惯鼠标右键自动粘贴的功能，对于SecureCRT6.7.5 ，这个功能也已经是默认配置了。 老版本的SecureCRT其实也有这个功能，只是不是默认设置，很多人不知道罢了。 菜单： Options->Global Options ...->Terminal 右边有个Mouse的选项块。 Copy on Select Paste on Right/Middle
  • Linux 软链接和硬链接 dongwei_6688 linux
    1.Linux链接概念Linux链接分两种，一种被称为硬链接（Hard Link），另一种被称为符号链接（Symbolic Link）。默认情况下，ln命令产生硬链接。 【硬连接】硬连接指通过索引节点来进行连接。在Linux的文件系统中，保存在磁盘分区中的文件不管是什么类型都给它分配一个编号，称为索引节点号(Inode Index)。在Linux中，多个文件名指向同一索引节点是存在的。一般这种连
  • DIV底部自适应 dcj3sjt126com JavaScript
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
  • Centos6.5使用yum安装mysql——快速上手必备 dcj3sjt126com mysql
    第1步、yum安装mysql [root@stonex ~]#  yum -y install mysql-server 安装结果： Installed:     mysql-server.x86_64 0:5.1.73-3.el6_5                   &nb
  • 如何调试JDK源码 frank1234 jdk
    相信各位小伙伴们跟我一样，想通过JDK源码来学习Java，比如collections包，java.util.concurrent包。 可惜的是sun提供的jdk并不能查看运行中的局部变量，需要重新编译一下rt.jar。 下面是编译jdk的具体步骤：         1.把C:\java\jdk1.6.0_26\sr
  • Maximal Rectangle hcx2013 max
    Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ones and return its area.   public class Solution { public int maximalRectangle(char[][] matrix)
  • Spring MVC测试框架详解——服务端测试 jinnianshilongnian spring mvc test
    随着RESTful Web Service的流行，测试对外的Service是否满足期望也变的必要的。从Spring 3.2开始Spring了Spring Web测试框架，如果版本低于3.2，请使用spring-test-mvc项目（合并到spring3.2中了）。   Spring MVC测试框架提供了对服务器端和客户端（基于RestTemplate的客户端）提供了支持。 &nbs
  • Linux64位操作系统（CentOS6.6）上如何编译hadoop2.4.0 liyong0802 hadoop
    一、准备编译软件   1.在官网下载jdk1.7、maven3.2.1、ant1.9.4，解压设置好环境变量就可以用。     环境变量设置如下：   （1）执行vim /etc/profile （2）在文件尾部加入: export JAVA_HOME=/home/spark/jdk1.7 export MAVEN_HOME=/ho
  • StatusBar 字体白色 pangyulei status
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent]; /*you'll also need to set UIViewControllerBasedStatusBarAppearance to NO in the plist file if you use this method
  • 如何分析Java虚拟机死锁 sesame javathreadoracle虚拟机jdbc
    英文资料： Thread Dump and Concurrency Locks   Thread dumps are very useful for diagnosing synchronization related problems such as deadlocks on object monitors. Ctrl-\ on Solaris/Linux or Ctrl-B
  • 位运算简介及实用技巧（一）：基础篇 tw_wangzhengquan 位运算
    http://www.matrix67.com/blog/archives/263    去年年底写的关于位运算的日志是这个Blog里少数大受欢迎的文章之一，很多人都希望我能不断完善那篇文章。后来我看到了不少其它的资料，学习到了更多关于位运算的知识，有了重新整理位运算技巧的想法。从今天起我就开始写这一系列位运算讲解文章，与其说是原来那篇文章的follow-up，不如说是一个r
  • jsearch的索引文件结构 yangshangchuan 搜索引擎jsearch全文检索信息检索word分词
    jsearch是一个高性能的全文检索工具包，基于倒排索引，基于java8，类似于lucene，但更轻量级。   jsearch的索引文件结构定义如下：     1、一个词的索引由=分割的三部分组成：        第一部分是词        第二部分是这个词在多少
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他