vue加强（第二天）

Posted 2022-08-20 8888-lhb

1. 事件（v-on）

a)       表达式的两种写法
data：
  num:0;

                     i.            <button v-on:click=”num++”>这是一个按钮</button>

                   ii.            <button @click=”num++”>这是一个按钮</button>

b)       内联事件的处理函数(事件里面绑定一个函数)

                     i.            <button v-on:click=”say(“hag”)”>这是一个按钮</button>

1. 计算属性和watch

a)       计算属性

                     i.            解决日期毫秒数：定义一个方法，在这个方法里面，先将这个毫秒数定义成一个常量，然后调用方法并且拼接返回年月日的值
var vm = new Vue(
      el:"#app",
      data:
          birthday:1429032123201 // 毫秒值
      ,
      computed:
          birth()// 计算属性本质是一个方法，但是必须返回结果
              const d = new Date(this.birthday);
              return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
         
     
  )

b)       Watch

                     i.            定义：watch可以让我们监控一个值的变化。从而做出相应的反应。

                   ii.            Data:
   watch:
              message(newVal, oldVal)
                  console.log(newVal, oldVal);
             

1. 组件

a)       定义：组件是用来完成特定功能的自定义的html标签

b)       组件的分类

                     i.            局部组件：在自己的vue实例中它挂载的元素都有效

1. 定义在Vue对象里面
   new Vue（
     el:”#app”
     components:
        //组件名称
        mybag:
           template:”<h1>ahfa</h1>”
        
     
   ）

                   ii.            全局组件：在所有的vue的实例下面挂载的元素有效

1. 语法：Vue.component("自定义标签的名字",配置对象)
   <div id=”app”>
     <mytag/>
   </div>
   
   new Vue(
     el:”#app”
   )
   //全局组件

a)       Vue.component(“mytag”,
   template:”<h1>chinese</h1>”
)

注意：1.templete模板里面有且只能有一个外部标签。2.自定义标签的命名不能驼峰命名方式，如果用了驼峰命名，在标签上要使用“-”来表示myTag-->my-tag

模板标签的内容不会显示在页面上

<template id=”myTem”>

         <form>

                  <imput>

</form>

</template>

注意：templete如果写在挂载容器里面会直接显示出来。

然后在templete：”#myTem” 引用templete就行了

在模板里面使用数据特别注意：

<Script>标签里面写form表单数据时，需设置type属性为text/template才不会报错

总结：模板里面的属性和方法，一定是从模板里面去获取

 

1. 路由

a)       下载路由：npm install vue-router
挂载方式三（.$mount(“#app”)）

b)       引入路由的js
to 表示要去找的路径
<rourter-link to=”/foo”>最终会编译成一个a标签
<rourter-view/> 路由出口

1. 打包脚本（webpack）

a)       优点

                     i.            提高网站效率

                   ii.            支持各种js语法

b)       安装webpack

                     i.            全局安装

1. npm install -g webpack(可能会出错，多试几次)
2. npm install -g webpack-cli(安装脚手架)

c)        测试
打包命令：webpack js/a.js –o dist/bundle.js

1. 脚手架（vue-cli）

a)       安装下载全局脚手架：npm install –g vue-cli

b)       进入我们的项目目录：cd 项目模块名称

c)        初始化脚手架：vue init webpack

d)       运行npm run dev命令，就可以访问我们的模块了

e)       打包命令：将这个模块交给别人使用，npm run dev,打包之后只能在服务器里面运行。

f)        重点关注：router/index.js和components/*.vue文件