thinking in vue

# basic usage

The created vue instance will proxy its data member

“`

  1. {{ company.text }} // bind 更新参数

let vm = new Vue({
el: ‘#app’,
data: {
companies: [
{text: ‘Google’, link: ‘http://google.com’},
{text: ‘fackbook’, link: ‘http://facebook.com’},
{text: ‘apple’, link: ‘http://apple.com’}
]
},
methods: {
reverseText: function() {
// 注意 this 绑定到了触发这个事件的元素内部
this.company.text = this.company.text.split(”).reverse.join(”);
}
}
});

vm.companies.push({text: ‘Amazon’, link: ‘http://amazon.com’});
“`

“`
// computed 属性可以绑定一个虚拟的属性到几个不同的属性上, 有点类似python的@property
// …
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ‘ ‘ + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(‘ ‘)
this.firstName = names[0]
this.lastName = names[names.length – 1]
}
}
}
// …
“`

“`

# 适合用来做自动保存文档等工作

“`

## flow control

### v-if

v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。v-else-if 也是.

可以使用template来包装多个元素:

“`

“`

### v-for

v-for的基本语法如前所述, 另外还可以采用可选参数 key. `

  • `.

    v-for还可以遍历对象, `

  • `

    v-for还可以直接遍历range, `

  • `

    ## 事件

    在vue中, 绑定的事件如果需要参数, 可以使用

    “`

    “`

    的形式, 其中 $event 指的是原声事件.

    ### 修饰符

    vue中的事件绑定函数可以使用一些修饰符来指定一些附加的效果. 常用的有 `.prevent`, `.stop`, `.self`, `.once` 等.

    像这样: ``

    对于键盘时间, 还可以使用修饰符来指定键值: ``

    ## mustache vs `v-bind`
    mustache can only be used in textContent of an element, `v-bind` is used for attribute.

    “`
    {{ link_text }}
    “`

    ## shortcut

    “`




    “`

    “`




    “`

    ## v-model 做双向绑定

    use v-model to double bind data between input and js.
    “`

    {{ message }}

    var app6 = new Vue({
    el: ‘#app-6’,
    data: {
    message: ‘Hello Vue!’
    }
    })
    “`

    值得注意的是, v-model 本质上只是一个语法糖.
    `` is just a syntax sugar to ``

    ### text area

    需要注意的是, textarea 时间上相当于一个input组件, 不能在testarea内部使用 {{value}} 的语法, 而应该使用 `v-model`

    “`
    Multiline message is:

    {{ message }}


    “`

    ### 修饰符

    就像事件一样, 也可以指定一些修饰符给 v-model, 常用的有 `.trim`

    # vue-component

    vue 的component中三个重要的概念: props, events, slots.

    其中props向下传递, 用于parent组件向child组件传递值. child组件对于props的访问只能是只读的. 在child组件中使用`v-bind:var=”var”`来访问定义的props. 注意在组件中不能更改props, 如果需要更改他, 请把他赋值给其他变量, 或者使用 computed 属性.

    如果把模板直接放到dom中会有一些标签渲染不出来, 建议放到

    “`
    // 在vue中注册一个组件, 大多数传递给vue实例的参数都可以使用, 除了 data 必须是一个函数

    Vue.component(‘todo-item’, {
    // todo-item 组件现在接受一个”prop”,类似于一个自定义属性. 这个属性名为 todo。
    props: [‘todo’],
    template: ‘

  • {{ todo.text }}
  • ‘,
    data: function() {},
    })



    Vue.component(‘todo-item’, {
    props: [‘todo’],
    template: ‘

  • {{ todo.text }}

  • })
    var app7 = new Vue({
    el: ‘#app-7’,
    data: {
    groceryList: [
    { text: ‘蔬菜’ },
    { text: ‘奶酪’ },
    { text: ‘随便其他什么人吃的东西’ }
    ]
    }
    })
    “`

    ### 事件

    parent组件可以监听子组件的事件, 从而实现通信:

    这个例子中, 子组件通过$emit()函数发送increment事件. parent组件通过监听子组件的increment事件, 从而获得子组件的消息.
    “`

    {{ total }}


    Vue.component(‘button-counter’, {
    template: ‘‘,
    data: function () {
    return {
    counter: 0
    }
    },
    methods: {
    incrementCounter: function () {
    this.counter += 1
    this.$emit(‘increment’)
    }
    },
    })
    new Vue({
    el: ‘#counter-event-example’,
    data: {
    total: 0
    },
    methods: {
    incrementTotal: function () {
    this.total += 1
    }
    }
    })
    “`

    ### slots

    slots vs props: slots 用于显示一大片的包含html代码的替换块, 而props 用于显示值, 有点类似 v-bind 和 {{}} 的区别.

    Props 允许外部环境传递数据给组件
    Events 允许从外部环境在组件内触发副作用
    Slots 允许外部环境将额外的内容组合在组件中。

    # vue router
    basic: 将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。

    “`

    /user/foo
    /user/bar


    “`

    # vue lifecycle

    # using in chrome extension

    chrome does not allow `eval` and `new Function()` in extensions, vue relies on it. you need to use CSP version of vue or relax the restriction by chrome.

    See also:

    * https://developer.chrome.com/extensions/contentSecurityPolicy#relaxing-eval
    * https://stackoverflow.com/questions/34615503/vue-js-in-chrome-extension
    * https://vuejs.org/v2/guide/installation.html#CSP-environments

    About 逸飞

    后端工程师

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注