vue加强(第二天)

Posted 8888-lhb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue加强(第二天)相关的知识,希望对你有一定的参考价值。

  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文件

以上是关于vue加强(第二天)的主要内容,如果未能解决你的问题,请参考以下文章

vue第二天

学习Vue第二天

vue学习第二天 ------ 临时笔记

vue.js总结第二天

学习vue的第二天

重拾MVC——第二天:Vue学习与即时密码格式验证