vue实例
import Vue from 'vue'; // 引入vue构造函数
import App from './App';
// 实例化vue
new Vue({
el: "#root", // => 绑定指定标签后，其标签便由Vue对象接管,该标签即为该Vue实例的挂载点
render: h => h(App) // 渲染函数，将指定的模板传入（可以说是vue的入口）
});
创建.vue文件
模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据
插值语法
- 文本插值
1.1(双大括号) 的文本插值：无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新
2. v-text指令
<h1>{{msg}}</h1>
<h1 v-text="msg"></h1>
- v-once指令
使用 v-once 指令，只能执行一次性地插值，当数据改变时，插值处的内容不会更新
<h2 v-once>{{msg}}</h2>
- v-html指令
识别HTML，更新元素的 innerHTML
不识别vue组件
<h3 v-html="smHtml"></h3>
-
v-show
根据表达式之真假值，切换元素的 display CSS 属性
v-show 的元素始终会被渲染并保留在 DOM 中 -
v-if
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建
如果元素是 <template> ，将提出它的内容作为条件块 -
v-else 与 v-else-if
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面
-
v-for
基于源数据多次渲染元素或模板块
就地复用策略
简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性
key属性的类型只能为 string或者number类型
主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误
> 会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致
<li v-for="(item, key) in list" :key="key">{{item}}</li>
<li v-for="(item, key) of list" :key="key">{{item}}</li>
<li v-for="(name, age, index) in obj" :key="index">{{name}} {{age}} {{index}}</li>
- v-on
绑定事件监听器
缩写 @
修饰符
stop - 调用 event.stopPropagation()
.prevent - 调用 event.preventDefault()。x
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
组件上定义的事件
<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>
- v-bind
-缩写 :- .camel 修饰符允许在使用 DOM 模板时将 v-bind 属性名称驼峰化
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 动态特性名 (2.6.0+) -->
<button v-bind:[key]="value"></button>
<!-- 动态特性名缩写 (2.6.0+) -->
<button :[key]="value"></button>
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
10 v-model
1. 数据的双向绑定
它负责监听用户的输入事件以更新数据
> 会忽略所有表单元素的 value、checked、selected
> 特性的初始值而总是将 Vue 实例的数据作为数据来源
2. 修饰符：
.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤
3. 表单控件及组件
<input>
在checkbox中： 多个复选框，会绑定到一个数组中
<select>
<textarea>
components
4. v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
text 和 textarea 元素使用 value 属性和 input 事件
checkbox 和 radio 使用 checked 属性和 change 事件
select 字段将 value 作为 prop 并将 change 作为事件
<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>
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
data() {
return {
checked: true,
message: '',
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
}
网友评论