vue 一步一步学习基础语法 (二)

最新推荐文章于 2022-05-22 22:33:01 发布

于立子

最新推荐文章于 2022-05-22 22:33:01 发布

阅读量155

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/yulizi0215/article/details/105385994

版权

VUE 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

vue 一步一步学习基础语法 (二)

笔者自身是从asp技术进入软件开发行业,那个时候的编程方式为面向过程编程,没有成熟的框架支持. 所有的页面方式都是通过一个页面拼接到一起的, 代码和逻辑都写到了页面里面, 所以既要有前端的基础,还要求会写函数,方法,还要会写sql 语句. 所以那个时候的代码就是,一个人编写一个人修改. 换个人, 逻辑重新看.
后来使用j2ee 框架出现 , webwork ,struts 1 struts2 spring mvc spring boot 成熟的后端框架一个接着一个方便.
但是前端的成熟的框架不是很多. 每一个框架都有自身的缺点, html5出现后, 前端框架开始集中出现,富客户端时代到来了. 现在主流的框架开始走单页面模式实现前后端分离. 前端开发人员只关注前端页面,数据交给后端. 微服务的诞生,更是将不同平台的系统,可以通过微服务的方式整合到一起, 让不同公司的项目,很容易的集成到一个大的平台上.
例如: Vue Angularjs React
因此,我们不需要做制造轮子的人, 只需要使用轮子 ,并且对于轮子加以改造.
vue 现在是前端框架的主流之一 !

1 目录结构:

我们看vue 基础项目目录结构:
用 HBuilder 打开官方的demo
左侧为初始化项目的目录结构.

在这里插入图片描述

我们打开目录底部的 readme.dm 文档里面详细的说明了 .各种启动命令的说明.

开发过程中,我们使用的命令为(支持热部署,也就是说改完代码后,页面能够看到改动的效果不需要重启):

npm run dev

打包项目使用(打包后部署到 tomcat iis nginx jboss 的web容器中):

npm run build

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

在这里插入图片描述

2 package.json

项目的基础属性以及应用的module参数. 这里说明了. node 的版本 npm 版本以及浏览器支持 IE >8 也就是说支持IE9 及以上版本.

  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

在这里插入图片描述
3 index.html

vue 的首页 ,自适应布局 . 定义引用标签. id=app

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<div id="app"></div>

在这里插入图片描述

4 static test 目录第三方资源默认放到static中, test 为测试目录(没用过)

在这里插入图片描述
5 src 目录最重要的目录, vue的开发配置引用都在此文件夹下完成.

6 node_modules
通过 cnpm install 安装后倒入的模块, 有的时候会报错,清空此文件夹,重新 cnpm install 会解决问题.

在这里插入图片描述

7 config 目录因为vue 考虑到了我们在开发和生产环境会使用不同的变量,因此他默认待了配置文件, 开发使用dev.env.js 生产使用 prod_env.js 测试使用 test.env.js . 解释一下.

开发运行命令: cnpm run dev 自动使用 dev.env.js 配置文件.
编译运行名林: cnpm run build 自动使用 prod.env.js 配置文件.
测试我没用过: cnpm run test 自动使用 text.env.js 配置文件.

在这里插入图片描述

8 build 文件夹:

对 webpack 开发和打包的相关设置，包括入口文件、输出文件、使用的模块等；

在这里插入图片描述

9 打包成功生成dist 目录里面就是一个 static + index.html 文件. 如果有第三方的引用会增加相应的目录.

在这里插入图片描述

10 src 目录详解:

main.js 这个文件类似于后台项目的 maven 项目的 pom.xml文件.

在这里插入图片描述
app.vue 初始化页面他和 index.html 不一样. index.html 是入口文件, 可以设定网页的格式,编码方式.
app.vue 就是标准的vue 文件, 包含了三个部分, 页面

在这里插入图片描述
router index.js 文件路由文件 ,配置页面的跳转规则.

commpants 组件 ,组件的概念,就是我们可以定义一些通用的或者模块可以被其他的页面引用. 例如弹出框. 不用每一个模块都顶一个弹出框. 组件的引用会很好的提升代码复用率. 减少代码量.
在这里插入图片描述
assets 文件夹主要是存放静态文件,例如 css jpg png gif 等文件．

views 文件夹: 我们新增的文件夹,用于存放.vue 页面文件. 此目录下会根据功能的模块名称创建子文件夹:

在这里插入图片描述

2 基础语法

我们删除官方demo中的部分代码 .保留这里我们看到了,第一个标准输出 {{}} .通过两个花括号输出data中的值:

<div class="hello">
    <h1>{{ msg }}</h1>
  </div>

export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Hello World First App'
      }
    }
  }

在这里插入图片描述

修改完成后 cnpm run dev

报错误: 我们看到最后两行 eslint 那就是告诉我们开启了强制检测脚本
在这里插入图片描述
解决此错误: 框里面的内容删除了 ,或者注释了

在这里插入图片描述
修改完成后 cnpm run dev

http://localhost:8081/#/

在这里插入图片描述

这里我们看到代码中没有那个图片,但是页面显示了.
这图片放到这里了.
在这里插入图片描述
我们删除它. OK了.

这里我们看到了一个标准的输出方式 {{}} 输出 data 中的内容 msg Hello World First App
在这里插入图片描述
我们测试一个语法,就增加一个页面, 页面通过 router 目录中的index.js 跳转.
文件上右键点击新建选择 .vue 页面.

修改 router 的 index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'


import vif        from '@/views/v-if.vue'   //增加引用

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    
    {                                        //增加引用
      path: '/vif',
      name: 'v-if',
      component: vif
    }
  ]
})

vif .vue

<template>
  <div>
    <div v-if="eat_Afternoon">该吃早饭了</div>
    <div v-if="eat_Afternoon">该吃中午饭了</div>
    <div v-if="eat_Evening"  >该吃晚饭了</div>
  </div>
</template>

<script>
var hours = new Date().getHours()
export default {
  data () {
    return {
      msg: 'hello vif',
      eat_Brackfast: hours < 12,
      eat_Afternoon: hours > 12 && hours < 14,
      eat_Evening: hours > 14

    }
  }
}
</script>

<style>

</style>

请求地址: 显示效果.

http://localhost:8081/#/vif

在这里插入图片描述

2.1 基本语法

{{}}         显示字符串

v-if         判断条件

v-show       显示和隐藏标签

v-for      循环显示                <div v-for="list ind lists " >{{list}}</div>
v-for      循环显示                <div v-for=" (list ,list2) in listall " >{{list}}  和 {{list2}} </div>
v-for      循环显示                <div v-for=" n in 10 " >{{n}} </div>

v-bind     属性绑定                <button v-bind:type="buttonType" > test button ></button>
<script>
export default {
  data () {
    return {
      buttonType:'submit'
    }
  }
}
</script>

v-bind 动态地绑定一个或多个特性，或一个组件 prop 到表达式。

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
 
<!-- 缩写 -->
<img :src="imageSrc">
    
绑定值 :
                             
<input type = "text" v-bind:value="inputText">
<p>{{inputText}}</p>


<script>
export default {
  data () {
    return {
      inputText:'initial value'
    }
  }
}
</script>

v-model通常用于表单和组件的双向数据绑定，也可以实现子组件到父组件数据的双向数据绑定：

数据绑定:    v-model           <div v-model="inputText"></div>

<script>
export default {
  data () {
    return {
      inputText:'initial value'
    }
  }
}
</script>

html数据加载:  v-html                           <div v-html="inputText"></div>

<script>
export default {
  data () {
    return {
      inputText:'<div><p>测试html代码</p></div>'
    }
  }
}
</script>

2.2 方法 : methods

我们看到在 data 同级下面增加了 methods:{} 就是方法. 页面中通过　{{firstmethord()}} 直接调用方法.

<template>
  <div>
    <div v-if="eat_Afternoon">该吃早饭了</div>
    <div v-if="eat_Afternoon">该吃中午饭了</div>
    <div v-if="eat_Evening"  >该吃晚饭了</div>
    <div>{{firstmethord()}}</div>
  </div>
</template>

<script>
var hours = new Date().getHours()
export default {
  data () {
    return {
      msg: 'hello vif',
      eat_Brackfast: hours < 12,
      eat_Afternoon: hours > 12 && hours < 14,
      eat_Evening: hours > 14

    }
  },
  methods:{
    firstmethord()
    {
      alert(1+1);
    }
  }
}
</script>

输出2 .
在这里插入图片描述

2.3 计算属性: computed

计算属性也是方法 , methods 每次有变化都会被执行, computed 只有引用变化了才会重新计算.

<script>
var hours = new Date().getHours()
export default {
  data () {
    return {
      msg: 'hello vif',
      eat_Brackfast: hours < 12,
      eat_Afternoon: hours > 12 && hours < 14,
      eat_Evening: hours > 14

    }
  },
  methods:{
    firstmethord()
    {
      alert(1+1);
    }
  },
  computed:{
    totalnum()
    {
       return 3*3;
    }
  }
}
</script>

2.4 监听器: watch

监听输入框内的值,获取到对比的值,交替显示.

<script>
var hours = new Date().getHours()
export default {
  data () {
    return {
      msg: 'hello vif',
      eat_Brackfast: hours < 12,
      eat_Afternoon: hours > 12 && hours < 14,
      eat_Evening: hours > 14,
      inputValue:'',
      oldInputValue:'',
    }
  },
  methods:{
    firstmethord()
    {
      alert(1+1);
    }
  },
  computed:{
    totalnum()
    {
       return 3*3;
    }
  },
  watch:{
    inputValue(){
       const  newValue = this.inputValue ;
       setTimeout(()=> {this.oldInputValue = newValue},5000);
    }
  }
}
</script>

2.5 v-on = v-on:click 相同简写 @click . 事件绑定 ,将事件监听器绑定到元素上.

<button v-on:click = "counter++" >单击增加</button>
<button @click = "counter++" >单击增加</button>
<div>{{counter}} 次数</div>

<template>
  <div>
    <div v-if="eat_Afternoon">该吃早饭了</div>
    <div v-if="eat_Afternoon">该吃中午饭了</div>
    <div v-if="eat_Evening"  >该吃晚饭了</div>
    <div>{{firstmethord()}}</div>
    <div>{{totalnum}}</div>
    <div><input type="text" v-model="inputValue"></input></div>
    <div>一会显示为: {{oldInputValue}}</div>

    <button v-on:click = "counter++" >单击增加</button>
    <button @click = "counter++" >单击增加</button>
    <div>{{counter}} 次数</div>

  </div>
</template>

<script>
var hours = new Date().getHours()
export default {
  data () {
    return {
      counter:0,
      msg: 'hello vif',
      eat_Brackfast: hours < 12,
      eat_Afternoon: hours > 12 && hours < 14,
      eat_Evening: hours > 14,
      inputValue: '',
      oldInputValue: ''
    }
  },
  methods: {
    firstmethord () {
      alert(1 + 1)
    }
  },
  computed: {
    totalnum () {
      return 3 * 3
    }
  },
  watch: {
    inputValue () {
      const newValue = this.inputValue
      setTimeout(() => { this.oldInputValue = newValue }, 5000)
    }
  }
}
</script>

<style>

</style>

<a      @click.prevent = "handleclick">阻止页面跳转</a>
<button @click.stop    = "handleclick">避免在父级触发</button>
<button @click.once    = "handlerfirstClick">只执行一次</button>
<div    @click.self    = "handleselfClick">仅在当前元素触发</div>
<div    @clilck.stop.capture.once>阻止元素延dom树向下传递,仅仅触发一次</div>

2.6 生命周期: 根据单词含义理解. vue 的整个生命周期 , 创建加载更新销毁同时每一个状态之前一个之前 . 创建之前记载之前更新之前销毁之前. 一共八个生命周期.

beforeCreate
Create
beforemounted
mounted
beforeUpdated
updated
beforedestroyed
destroyed

于立子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue 一步一步学习 基础语法 (二)

vue 一步一步学习 基础语法 (二)

1 目录结构:

2 基础语法

2.1 基本语法

2.2 方法 : methods

2.3 计算属性: computed

2.4 监听器: watch

2.5 v-on = v-on:click 相同 简写 @click . 事件绑定 ,将事件监听器绑定到元素上.

2.6 生命周期: 根据单词含义理解. vue 的 整个生命周期 , 创建 加载 更新 销毁 同时 每一个状态之前一个之前 . 创建之前 记载之前 更新之前 销毁之前. 一共八个生命周期.

vue 一步一步学习基础语法 (二)

vue 一步一步学习基础语法 (二)

2.5 v-on = v-on:click 相同简写 @click . 事件绑定 ,将事件监听器绑定到元素上.

2.6 生命周期: 根据单词含义理解. vue 的整个生命周期 , 创建加载更新销毁同时每一个状态之前一个之前 . 创建之前记载之前更新之前销毁之前. 一共八个生命周期.