vue-02-安装-指令

Posted 2021-01-10 wenbronk

1, vue安装

1), 安装vue-cli

npm install -g cnpm --registry=https://registry.npm.taobao.org

之后可以用 淘宝的npm镜像安装
cnpm install vue-cli -g

# -g  等价于 --global

2), 初始化项目, 创建基于webpack的模版

vue init webpack lisa-yoga-baby

路由: n, Eslink(代码检查): n, test: n, Nighwatch: n

3), 进入项目

cd lisa-yoga-baby

4), 安装依赖, 根据package.json安装

npm install

5), 启动项目

npm run dev

6), 打包

npm run build

 

2, 项目目录结构

index.html: 项目根目录视图

.postcssrc.js　　postcss 配置文件

static: 　　　　静态文件目录, 服务器启动后可以直接访问到

src: 　　　　　源码文件

config: 　　　  配置文件

build: 　　　　服务器到配置文件

3, 模板语法: 

Mustache: 模板

表现形式: {{ 语法 }}

{{ hello }}
通过下面的 script进行返回
<script>
  export default {
    name: ‘HelloWorld‘,
    data() {
      return {
        msg: ‘Hello Vue‘
      }
    }
  }
</script>

2), 可以做运行

{{ 1 + 1 }}
{{ 0 < 10 ? "true" : "false" }}

3), 只能存在单行语句

 

4, vue组件, 包含3个内容

1), 视图部分

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

 

2), 逻辑部分

<script>
  export default {
    name: ‘HelloWorld‘,
    data() {
      return {
        msg: ‘Hello Vue‘
      }
    }
  }
</script>

 

3), 样式部分

<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>

 

5, 基本命令

指令的简写形式  v-bind:key=‘’  简写为    :key=‘’

1), v-text

<p v-text="msg">text</p>

<script>
  export default {
    name: ‘HelloWorld‘,
    data() {
      return {
        msg: ‘<p>Hello Vue</p>‘,
        flag: ‘ i am flag‘
      }
    }
  }
</script>

不能解析html标签, 原样输出 

2), v-html

<div v-html="msg"></div>

解析标签为 html的元素

3),  v-bind 绑定

<span v-bind:class="bind_ha">hahaha a</span>

<script>
  export default {
    name: ‘HelloWorld‘,
    data() {
      return {
        msg: ‘<p>Hello Vue</p>‘,
        flag: ‘ i am flag‘,
        bind_ha: "ha111"
      }
    }
  }
</script>

可通过 v-bind, 更改 html标签的 内置属性

双花括号 {{ }} 不可以用来更改html的内敛标签

4), v-if 条件渲染

    <!--v-if 属性-->
    <div>
      <p v-if="show">if can see</p>
      <p v-else-if="show"> else if can see </p>
      <p v-else="!show">else can see </p>
    </div>

<script>
  export default {
    name: ‘HelloWorld‘,
    data() {
      return {
        msg: ‘<p>Hello Vue</p>‘,
        flag: ‘ i am flag‘,
        bind_ha: "ha111",
        show: false
      }
    }
  }
</script>

 5), v-show  和v-if 类似, 但没有else

<div>
      <p v-show="show"> show can see </p>
    </div>

v-if 是惰性的, v-show总是被渲染, 且基于css 进行切换

频繁切换使用 v-show

6), v-for 循环渲染, 针对数组进行渲染

<!--v-for-->
    <div>
      <ul>
        <li v-for="(name, index) in names" v-bind:index="index">{{ name.name }} : {{ name.age }}</li>
      </ul>
    </div>

使用 v-for进行遍历, 使用 v-bind 进行name, id之类的绑定

<script>
  export default {
    name: ‘HelloWorld‘,
    data() {
      return {
        msg: ‘<p>Hello Vue</p>‘,
        flag: ‘ i am flag‘,
        bind_ha: "ha111",
        show: false,
        names: [{name: ‘vini‘, age: 24}, {name: ‘wenbronk‘, age: ‘26‘}, {name: ‘lisa‘, age: ‘25‘}]
      }
    }
  }
</script>

 7), v-on: 事件监听

简单事件

<div>
      <button v-on:click="num += 1"> 按钮</button>
      <p> {{ num }}</p>
    </div>

<script> 
num: 1, </>

 事件参数:  methods: 

 

    <!--methods -->
    <div>
      <button v-on:click="handlerClick"> methods 按钮 </button>
    </div>

放在data的同级下

<script>
  export default {
    name: ‘hello‘,
    data() {
      return {
        names: [{name: ‘vini‘, age: 24}, {name: ‘wenbronk‘, age: ‘26‘}, {name: ‘lisa‘, age: ‘25‘}],
        num: 1,
      }
    },

　　handlerClick() {
  　　　　alert("事件1 ")
  　　　　// 去上面data的值, this索引当前data中的数据
  　　　　this.show = !this.show
　　}

 } </script>

事件修饰符: 

.stop　　阻止时间冒泡

.prevent 阻止事件

.capture

.self

.once　　只生效一次

 只需要在 on.click后添加, 即可

<li v-on:click.once="getItemInfo(index, $event)" v-for="(name, index) in names">{{ name }}</li>

键盘监听: 

<div>
  <input type="text" v-on:keyup="getKeyInfo"/>
  <!--只有enter才会监听-->
  <input type="text" v-on:keyup.enter="getKeyInfo"/>
</div>

 

 methods: {
      getItemInfo(index, event) {
          console.log(this.names[index]);
         console.log(event);
      },
      getKeyInfo(event) {
        console.log(event.keyCode)
        console.log(event.key)
      }
    }

此外还提供了例如

.enter,   .tab　　.delete　　.esc　　.space　　.up　　.down　　.left　　.right 等多个快捷监听, 

只有相应的按键才会被触发

<input type="text" v-on:keyup.enter="getKeyInfo"/>

 8), 数组动态更新

数据变化可以引起视图的变化

 <div>
      <button v-on:click="pushArr">pushArr</button>
    </div>

pushArr() {
        this.names.push("wenbronk")
      }

但有些方法无法引起视图的变化

filter, concat, split等

不会修改原数组变化

方法的简写

@ 代替  v-on:   

6, 计算属性

1), 如果一个methods在多个地方需要调用, 可以使用计算属性  

 但计算属性相对于methods, 可以进行缓存结果, 多次访问 methods可以立刻返回缓存结果

computed: {
       msgRe() {
         return this.message.split(‘‘).reverse().join(‘‘);
       }
    }

 

<!--观察这-->
    <div>
      <p> {{ msgRe}}</p>
    </div>

2), 表单计算绑定  v-model

双向数据绑定

使输入的内容可以立刻获取

<!--表单数据绑定， 数据立马显示在下面-->
    <div>
      <input type="text" v-model="msg"/>
      <p> {{ msg }}</p>
    </div>

script

export default {
    name: "a03_computed",
    data() {
      return {
        message: "hello every body",
        msg: ""
      }
    },

如果要实时监听数据

   data() {
      return {
        message: "hello every body",
        msg: ""
      }
    },

    methods: {},

    computed: {
      msgRe() {
        return this.message.split(‘‘).reverse().join(‘‘);
        // return this.message.split(‘‘).reverse().concat(‘‘);
      }
    },
    watch: {
      msg: function (data) {
        console.log(data + "   data 就是你输入的额信息")
      }
    }

在data同级 加 watch

3), 修饰符

lazy, 失去焦点了在使用,  v-model.lazy=‘msg‘

number, 　转换为number类型的时候, 才处理

.trim,