二、vue从入门到进阶：指令与事件

1.插值

v-once：插入一次值，但不会再次改变。
这个将不会改变: {{ msg }}

2.使用 JavaScript 表达式

js
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

二.v-bind与v-on的缩写

v-bind 缩写







Button


Button

v-on 缩写

...


...

三.条件渲染

  Now you see me


  Now you don't



  A


  B


  C


  Not A/B/C

#v-show
Hello!
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

四.列表渲染v-for

1.循环数组

in==of
 
  or（
）
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
result 
Parent - 0 - Foo
Parent - 1 - Bar
##=========
##2.循环对象

  

    {{ value }}
  

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

//索引     ///对象属性名字  //值
  {{ index }}. {{ key }}: {{ value }}


out==>
1.firstName: John
2.lastName: Doe
3.age: 30

##key
##为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你##需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。

自己使用.

代码块
1.注册组件
Vue.component('vue-radio2', {
    props: {radio:['radio'],deful:['deful']},
    methods: {
        change() {
            this.$emit('input', this.radio.codeValue);
        }
    },
    computed: {
        isSelect: function () {
            console.log(this.deful)
            console.log(this.radio.codeValue)
            console.log(this.radio.codeValue === this.deful)
            return this.radio.codeValue === this.deful;
        }
    },
    template: '' +
        '
' + '\n' +
        '' + '\n' +
        '' + '\n' +
        '{{radio.codeName}}' + '\n' +
        '
'
});
2.

                            
1. v-model绑定对应的值。
2. v-for 循环 radioList ==>从后台获取
3.v-bind:radio 对应的单独对象
   v-bind:deful： 默认值。
   v-bind:key：需要一个key.
3.
往groceryList2，添加对应的对象。
 
  addNewTodo: function () {
            this.groceryList2.push({
                id:"sdsdsd",text:this.newTodoText,value:"sadasda"
            })
        },
          

事件修饰符

.stop
.prevent
.capture
.self
.once

...

...

按键修饰符

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

六.表单输入绑定v-model

Message is: {{ message }}

修饰符.lazy,.number,.trim

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：（+-e还是可以输入）

消除空格