Vue基础知识汇总

vue使用

可以在html中通过脚本进行引入

引入vue.js:

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> vue.js
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> 路由

通过脚本创建vue项目

查看Nodejs及Vue常用命令

全局安装vue-cli
npm install --global vue-cli

创建webpack模板项目
vue init webpack project_name

使用vue直接创建
vue create project_name

vue生命周期

钩子函数名称	触发时机
beforeCreate	实例初始化之后，数据观测和事件配置之前调用
created	实例创建完成后立即调用，此时实例已经完成数据观测、属性和方法的运算、watch/event时间回调
beforeMount	在挂载开始之前被调用：相关的render函数首次被调用
mounted	el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子
beforeUpdate	数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前
updated	由于数据更新导致的虚拟DOM重新渲染和打补丁之后调用
beforeUnmount	实例卸载之前调用
unmounted	实例被卸载之后调用

vue模板语法

• v-html:添加html模板
• v-bind:添加属性，缩写：
• v-on:监听事件，缩写@
• v-model:数据双向绑定
• 过滤器{{message | filterA | filterB}} {{message | filterA(‘arg1’,arg2)}}

vue条件语句

• v-if:条件判断
• v-else:给v-if添加一个else块
• v-else-if:用作v-if的else-if块
• v-show:根据条件展示元素

vue循环语句

• v-for:需要以site in sites形式的特殊语法，sites是源数据数组，site是数组元素迭代的别名

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

vue计算属性

• computed:计算属性
• computed vs methods:computed基于依赖缓存，相关依赖改变会重新取值；methods在重新渲染，函数总会重新调用执行
• computed属性默认只有getter

vue监听属性

watch:响应数据的变化，监听data数据变化执行相关的方法

vue表单

input:输入框 checkbox：选择框 radio：选择原点 select：下拉框 textarea：大文本
<label for="对应框">值</label>:可以扩大选择范围

• .lazy:lazy修饰符，转变为change事件同步
• .number：处理数字
• .trim:去除空格

vue组件

组件（Component）可以扩展HTML元素，封装可重用代码
语法：Vue.component(tagName,options)

• 全局实例，在创建实例之前提前创建

<div id="app">
    <runoob></runoob>
</div>
 
<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

• 局部实例，在实例内进行创建

<div id="app">
    <runoob></runoob>
</div>
 
<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}
 
// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})
</script>

• prop：子组件用来接收父组件传递过来的数据的一个自定义属性，父组件的数据通过props把数据传给子组件，子组件需要显示的用props选项声明"prop".

vue路由

单独使用需要引入：<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>

router-link 相关属性：

• to:表示目标路由的链接
• replace:设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录
• append:设置 append 属性后，则在当前 (相对) 路径前添加其路径
• tag:有时候想要 router-link 渲染成某种标签，例如 li
• active-class:设置 链接激活时使用的 CSS 类名
• exact-active-class:配置当链接被精确匹配的时候应该激活的 class。
• event:声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组