vue事件. - 掘金

vue的option

标签上的常用指令

插值语法： {{}} 文本传值，可以用函数传值

v-once ：元素和组件值只渲染一次，不会随着数据变化而改变

v-html="参数传值" 对传过来的值，以html的格式解析

v-pre 将标签的值以文本的格式显示

v-cloak 对于没有及时响应的js的标签，这里可以统一设置css

属性设置参数： v-bind 加入属性绑定参数（简单写法 :属性） v-bind的数组参数，如果式true，显示该属性，flase取消该属性 3、v-bind加入函数

v-for="i in 参数数据">{{i}}

v-bind绑定css 对象语法如果没有单引号，是传参

，数组语法

计算属性

option的一个选择项 computed 使用computed里面定义函数而不使用method，是因为method每次调用都执行，没有缓存

计算属性setter和getter

methods和computed的区别，computed有缓存的作用，页面只执行一次而method是每次都执行一次

es6语法

let修饰变量，const修饰常量

再es6前，只有var，为了避免数据被修改使用function（i）作为局部变量来获取值

这里可以用 let修饰变量，const修饰常量替代

const一旦被赋值就不可修改

事件监听： v-on事件语法糖 @事件

1、（@事件=.stop）在按钮的外面一层也有事件，如何实现点击按钮，不会触发外层的事件？如图，增加.stop

2、（@事件=.prevent）如何阻止事件默认执行

3.事件只监听一次事件.once

事件.

v-if="ture/false",可以控制是否显示

颗v-if是true那么v-else为false

登录切换小案例

<body>

<div id="app">
  <span v-if="isuse">
      <label for="username">用户账号</label>
      <input type="text" id="username" placeholder="用户账号">
  </span>
    <span v-else="isuse">
         <label for="username">用户邮箱</label>
        <input type="text" id="username" placeholder="用户邮箱">
    </span>
    <button @Click="isuse = !isuse">切换账号</button>
</div>


<script src="../js/vue.js"></script>`
<script>
    //let(接受变量) cont（接收常量）
    const app = new Vue({
        el:'#app',//挂在需要管理的数据V
        data:{
            isuse:true
        }
    })
</script>

v-if 和 v-show
v-if 隐藏时，没有dom， v-show只修改了dom属性

v-for遍历数组

 <ul>
        <li v-for="(i,index) in movies">{{index+1}}.{{i}}</li>
    </ul>

获取对象的值

功能：数据以列表的形式展示

<div id="app">
    <ul>
        <li v-for="item in movie"> {{item}}</li>
    </ul>
</div>

  const app = new Vue({
        el:'#app',//挂在需要管理的数据V
        data:{
            movie:['aaa','bb','cc']
        }
    })