JavaScript教程之vue.js小总结

当前位置:

首页 > 网站开发 > JavaScript >

JavaScript教程之vue.js小总结

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统;

指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性;

v-for 指令可以绑定数组的数据来渲染一个项目列表;

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法;

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

可以使用 v-bind 指令将待办项传到循环输出的每个组件中;

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

</div>

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

示例：

<p>The button above has been clicked {{ counter }} times.</p>

</div>

var example1 = new Vue({

el: '#example-1',

data: {

counter: 0

}

})

v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

<a v-on:click.once="doThis"></a>

这个 .passive 修饰符尤其能够提升移动端的性能。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你_不_想阻止事件的默认行为。

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->

<input v-on:keyup.13="submit">

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<button @click.ctrl="onClick">A</button>


<button @click.ctrl.exact="onCtrlClick">A</button>


<button @click.exact="onClick">A</button>

数据显示绑定：

<input v-model="message" placeholder="edit me">

<p>Message is: {{ message }}</p>

多行文本：

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

（js代码省略）

单个复选框，绑定到布尔值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

多个复选框，绑定到同一个数组：

<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})

单选按钮：

<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>

new Vue({
el: '#example-4',
data: {
picked: ''
}
})

选择框：

单选时：

<div id="example-5">
<select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>

new Vue({
el: '...',
data: {
selected: ''
}
})

<select> 标签的 multiple 属性规定可同时选择多个选项。

多选时 (绑定到一个数组)：

<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>

new Vue({
el: '#example-6',
data: {
selected: []
}
})

用 v-for 渲染的动态选项：

<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
el: '...',
data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
}
})

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

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

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

size.trim().toLowerCase() trim(): 它的作用是:去除字符串前后的空格.

toLowerCase 方法 (JavaScript): 将字符串中的所有字母字符转换为小写形式。

自 2.3.0 起，异步组件的工厂函数也可以返回一个如下的对象：

const AsyncComp = () => ({
// 需要加载的组件。应当是一个 Promise
component: import('./MyComp.vue'),
// 加载中应当渲染的组件
loading: LoadingComp,
// 出错时渲染的组件
error: ErrorComp,
// 渲染加载中组件前的等待时间。默认：200ms。
delay: 200,
// 最长等待时间。超出此时间则渲染错误组件。默认：Infinity
timeout: 3000
})

注意，当一个异步组件被作为 vue-router 的路由组件使用时，这些高级选项都是无效的，因为在路由切换前就会提前加载所需要的异步组件。另外，如果你要在路由组件中使用上述写法，需要使用 vue-router 2.4.0 以上的版本。

在 HTML 模板中，请使用 kebab-case：

<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<pascal-cased-component></pascal-cased-component>

组件在它的模板内可以递归地调用自己。不过，只有当它有 name 选项时才可以这么做：

name: 'unique-name-of-my-component'

当你利用 Vue.component 全局注册了一个组件，全局的 ID 会被自动设置为组件的 name。

Vue.component('unique-name-of-my-component', {
// ...
})

如果稍有不慎，递归组件可能导致死循环：

name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'

上面组件会导致一个“max stack size exceeded”错误，所以要确保递归调用有终止条件 (比如递归调用时使用 v-if 并最终解析为 false)。

假设你正在构建一个文件目录树，像在 Finder 或资源管理器中。你可能有一个 tree-folder 组件, 以及一个 tree-folder-contents 组件

另一种定义模板的方式是在 JavaScript 标签里使用 text/x-template 类型，并且指定一个 id。例如：

Vue.component('hello-world', {
template: '#hello-world-template'
})

这在有很多大模板的演示应用或者特别小的应用中可能有用，其它场合应该避免使用，因为这将模板和组件的其它定义分离了。

我也是初学vue，新人总结不全满，还望谅解~

栏目列表