后端程序员的Vue笔记(一)

一个普通的后端程序员, 有简单的html+css+js基础. 偶尔需要写一些后台, 所以一直用bootstrap+jquery做后台页面. 当后台的页面越来越多, 功能越来越复杂, 简单粗暴的直接jQuery就不好维护了. 于是开始寻求更好的架构来复用前端的代码.

粗略地浏览过几大前端框架后, 我打算先常识下vue.

一 引入vue

开发环境<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

二 vue实例

new Vue({
  el: '#app',
  data: {//数据绑定
　　firstName: "hello"　　
  },
  computed:{//计算属性
  },

　　watch: { //侦听属性

　　　　firstName: function(val){

　　　　　　//do sth

　　　　}

　　},

　　methods: {

  }
})

三 模板语法

1 文本差值使用Mustache语法

<span>{{ datafield }} </span>

2 指令

　　v-bind

　　　　v-bind:[attributeName]

　　　　:[attributeName]

　　　　绑定class时:

　　　　　　内联语法v-bind:class="{ className: boolean }"控制class的动态切换

　　　　　　对象绑定v-bind:class="classObject"可以直接绑定一个对象. 还可以将绑定对象作为计算属性

　　　　　　数组语法v-bind:class="[activeClass, errorClass]"

　　　　　　在数组中使用对象语法v-bind:class="[{ active: isActive }, errorClass]"

　　　　绑定style时:

　　　　　　与绑定class语法类似, boolean部分替换为string

　　v-on

　　　　v-on:[eventName]

　　　　@eventName

　　　　修饰符功能

　　v-if/v-else-if/v-else

　　　　v-if="boolean"控制标签是否渲染

　　v-show

　　　　单纯切换display样式

　　v-for

　　　　<li v-for="item in items" :key="item.message">

　　　　<li v-for="(item, index) in items">

　　　　<div v-for="item of items"></div>//用of替换in语法更接近js　　　　

　　　　v-for还可以迭代object的properties(不保存各浏览器中顺序一致)

　　　　　　<div v-for="value in object">

　　　　　　<div v-for="(value, name) in object">

　　　　　　<div v-for="(value, name, index) in object">

　　　　v-for还可以用于重复次数

　　　　　　<span v-for="n in 10">{{ n }} </span>//输出为1 2 3 4 5 6 7 8 9 10

　　　　当v-for和v-if在同一标签上使用时, v-for优先于v-if, 不推荐这样写.    

3 表达式 支持在插值和指令中使用表达式

四 计算属性

在Vue实例的computed属性中定义.

动态计算属性值, 分get和set, 默认get. 属性get值的变动只有在get的响应式依赖属性发生变动时才会触发.

五 事件处理

使用v-on指令或其缩写绑定事件处理. 简单语句可以直接写js, 复杂调用建议定义在Vue实例的methods属性中.

在methods属性中的function可以被js直接调用. 可以通过内联传参, $event作为特殊变量可以通过内联传参让处理函数可以使用原生dom事件.

事件修饰符: 

• .stop阻止事件继续传播
• .prevent阻止默认行为
• .capture预先捕获事件处理
• .self只有当事件是自身元素触发
• .once触发1次
• .passive在默认行为处理前触发

修饰符可以串联使用

按键事件修饰符: 当事件为keyup等按键事件时可以使用修饰符指定按键名, kebab-case

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

可以使用自定义按键修饰符别名 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112

系统修饰键: 修饰组合按键或者鼠标事件时可用

• .ctrl
• .alt
• .shift
• .meta

使用修饰符.exact表示当且仅当描述的修饰符时生效

鼠标按键修饰符:

• .left
• .right
• .middle

六 表单

使用v-model指令绑定表单元素指

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
  • 单个复选框可以绑定到bool变量, 值是checked
  • 多个复选框可以绑定到数组, 会增删数组元素, 值是value
  • radio绑定到value值
• select 字段将 value 作为 prop 并将 change 作为事件。
  • 单选时绑定到字符串
  • 多选时绑定到数组

修饰符

　　.lazy　　将input事件转化为change事件中同步

　　.number　　将绑定的值转化为数字

　　.trim　　去除值的首尾空白