Vue基础用法
模板语法
mustache 语法中在支持写js
-
1.用法：
-
内容：必须加{{ js语法 }}
-
属性：属性中属性值可以直接写js语法，并且属性值中的数据相当于全局变量
-
给一个标签加一个自定义属性/已有属性
img中的src就是已有属性 <img src = "" /> //data-index就是自定义属性 ， web网页中建议我们使用data-形式来定义自定义属性 <img data-index = "0" /> -
指令
- Vue想在html中使用自己的属性，并且要和他的语法和数据相结合
- Vue给这种带v标识的属性，起了一个名字： 指令【 借鉴angular 】
-
<div v-html = "msg"> </div> -
-
2.对js的支持性
- 数据类型
- 第一种
- 初始数据类型： number string null undefine boolean
- 引用数据类型: Object [ function array … ]
- 第二种
- 基础数据类型: number string boolean
- 特殊数据类型： null undefine
- 复杂数据类型； Object [ function array …]
- 第一种
- 输出语法
- console
- alert
- 表达式 / 运算符
- 三元表达式
- 数据类型
-
3.总结
- null 和 undefined 是不会显示的，其他数据类型都是支持的，可以显示的
- 挂载在window身上的全局属性，我们都不能用的： 比如： console alert
- {{ }} 不写流程控制
- for
- if
- while
- do…while
- {{}} 支持三元表达式，同样也支持运算符
- 短路原则也是支持的
指令
指令的目的：操作DOM
解释：MVVM vm -> v 数据驱动
1、v-html： 转义输出，也就是可以解析 xml 数据
2、v-text： 非转义输出，也就是无法解析 xml 类型数据
3、v-bind
-
将数据和属性进行单向数据绑定： 将vue中数据赋值给属性值
<img v-bind:src = "src" /> <div v-bind:class = ""> </div> <div v-bind:style = ""> </div> -
简写形式
<img v-bind:src="src" alt=""> <img :src="src" alt=""> -
类名绑定
-
用法
-
对象形式用法
<p :class = "{ bg: true,size: true }"></p> <p :class = "{ bg: true,size: false }"></p> <p :class = "{ [classA]: true,[classB]: true }"></p> /* 思考： 如果我在data中定义了两个数据 classA classB ,针对对象用法如何使用？ <p :class = "{ classA: true,classB: true }"></p> * 上面这种写法中的classA,classB 和我们定义的data选项中的classA classB 可是 不一样的 如何解决： <p :class = "{ [classA]: true,[classB]: true }"></p> */ -
数组形式用法
<p :class = "[ 'size','bg' ]"></p> <p :class = "[ classA,classB ]"></p> <p :class = "[ classA,classB,5>3?'a':'b']"> </p>
-
-
-
样式绑定
-
用法
<script> new Vue({ el: '#app', data: { styleObj: { width: '100px', height: '100px', background: 'purple' }, size: { width: '200px', height: '200px' }, bg: { background: 'blue' } } }) </script>-
对象形式用法
<p :style = "{width: '100px',height: '100px',background: 'yellow'}"></p> <p :style = "styleObj"></p> -
数组形式用法
<p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p> <p :style = "[size,bg]"></p>
-
-
条件渲染
- v-if
- v-else-if
- v-else
- v-show 条件展示
<div id="app">
<h3> 条件渲染 - 单路分支 </h3>
<p v-if = "flag"> A </p>
<h3> 条件渲染 - 双路分支 </h3>
<p v-if = "flag"> A </p>
<p v-else > B </p>
<h3> 条件渲染 - 多路分支 </h3>
<p v-if = "type === '美食'"> 美食 </p>
<p v-else-if = " type === '游戏' "> 游戏 </p>
<p v-else> 睡觉 </p>
<h3> 条件展示 </h3>
<p v-show = " showFlag "> 条件展示 </p>
</div>
new Vue({
el: '#app',
data: {
flag: true,
type: '美食',
showFlag: true
}
})
- v-if与v-show
- v-if控制的是元素的存在与否
- v-show控制的是元素的display:none属性
- 初始为false时，v-show性能损耗更高。
- 需要频换切换时，用v-show
- 偶尔切换时，用v-if
列表渲染
-
v-for指令
<h3> 数组 </h3> <ul> <li v-for = "(item,index) in arr" :key = " index "> {{ item }} -- index{{ index }} </li> </ul> <h3> 对象 </h3> <ul> <li v-for = "(item,key,index) of obj" :key = "index"> {{ item }} -- {{ key }} -- {{ index }} </li> </ul> <h3> json </h3> <ul> <li v-for = "item in json" :key = "item.id"> <span> 商品名称： {{ item.shop_name }} </span> <span> 商品价格： {{ item.price }} </span> </li> </ul> <h3> 循环嵌套 </h3> <ul> <li v-for = "item in lists" :key = "item.id"> <h3> 商品类型： {{ item.shop_name }} </h3> <ul> <li v-for = "item in item.type" :key = "item.id"> <p> 制造商： {{ item.maker }} </p> </li> <!-- <li v-for = "ele in item.type" :key = "ele.id"> <p> 制造商： {{ ele.maker }} </p> </li> --> </ul> </li> </ul> <h3> 循环number / string </h3> <p v-for = "item in 10"> {{ item }} </p> <p v-for = "item in 'abc'"> {{ item }} </p> -
总结：
-
- 列表渲染参数可以写三个，分别为 item key index (可以为其他名字)
-
- 列表渲染，要在渲染的元素身上加一个key，作为这个元素唯一的标识 ,
-
- 循环嵌套式，参数名称是可以一致的（v-for=“item in item.type”）
-
- in / of 都可以使用
-
事件处理器
-
事件包含部分
-
事件源
-
事件类型
-
事件处理函数
-
事件执行形式
- js执行
- html中执行（Vue选择）
-
普通html中
<button onclick = "alertHandler()"> 点击 </button> -
v-on
<div id="app"> <button v-on:click = 'fn'> 点击 </button> <button @click = 'fn'> 点击 </button> <!-- 简写形式 --> <button @click = "eventHandler"> 事件对象 </button> <button @click = "argumentHandler( a,b,$event )"> 事件参数 </button> </div> <!-- $event表示事件对象 -->new Vue({ el: '#app', data: { a: 10, b: 20 }, methods: { // methods称之为方法 ，里面存储是事件处理程序 fn () { alert('事件') }, eventHandler ( e ) { //事件对象 console.log( e ) }, argumentHandler ( a,b,e ) { console.log( e ) console.log( a + b ) } }-
事件对象： 事件对象记录了整个事件的信息
-
事件参数
-
形式参数: 定义函数/方法时的参数
-
实际参数: 调用函数/方法时传入的参数
-
注意： 当一个事件处理程序中有多个参数，其中一个参数是事件对象式，我们在调用这个方法时，要添加一个实际参数 $event 与之对应
-
-
-
事件修饰符
<div id="app"> <h3> 事件修饰符 </h3> <div class="big" @click.stop = 'bigHandler'> <div class="middle" @click.stop = "middleHandler"> <div class="small" @click.stop = "smallHandler"></div> </div> </div> </div>-
.stop 阻止事件冒泡
-
.prevent 阻止事件默认事件
-
.once 事件只会触发一次
-
.self 事件不是从内部元素触发的，即event.target是自身元素
-
.capture 使用事件捕获模式，即先执行外层元素，再执行内部元素
-
修饰符可以串联，可以只有修饰符
<!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> -
.passive
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div>.passive修饰符尤其能够提升移动端的性能。- 不要把
.passive和.prevent一起使用，因为.prevent将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive会告诉浏览器你不想阻止事件的默认行为
-
-
键盘修饰符
<div id="#app"> <h3> 键盘修饰符 </h3> <input type="text" @keyUp.13 = "getValue"> <input type="text" @keyUp.enter = "getValue"> </div>-
可以直接将
KeyboardEvent.key暴露的任意有效按键名转换为 kebab-case 来作为修饰符- 即$event.key等于enter（示例中）时被调用
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
-
使用
keyCode特性也是允许的。(数字) -
还可以通过全局
config.keyCodes对象自定义按键修饰符别名：// 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112
-
表单控件绑定
-
v-model
<div id="app"> <input type="text" v-model = "msg"> <p> {{ msg }} </p> </div>- 双向数据绑定
- VM 改变 V随之改变
- V改变， VM也随之改变
- v-model只用于表单
- 理由： v-model默认绑定value属性
- 底层实现双向数据绑定
<body> <div id="example"></div> <input type="text" id="text"> </body> <script> var exa = document.querySelector('#example'); var text = document.querySelector('#text'); var data = { name: 'Liming' }; var observer = {...data }; Object.defineProperty(data, 'name', {//通过该方法实现 get() { return observer.name; }, set(val) {//属性值改变时触发该方法，参数为该属性新的值 exa.innerHTML = val; } }); text.addEventListener('keyup', function() { data.name = this.value; }); exa.innerHTML = data.name; text.value = data.name; </script> - 双向数据绑定
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
