vue.js小总结

China☆狼群 提交于 2020-04-22 03:12:42

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="item in items" :key="item.id">

  <!-- 内容 -->

</div>

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

 

 

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

 

示例:

 

<div id="example-1">

  <button v-on:click="counter += 1">Add 1</button>

  <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>

 

 

<div v-on:scroll.passive="onScroll">...</div>

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

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

 

 

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

 

 

 

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

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<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 修饰符:

<input v-model.number="age" type="number">

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

 

 

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

<input v-model.trim="msg">

 

 

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:

<!-- 在 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。例如:

<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>

 

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

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

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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!