vue基础(1)
一．Vue是什么
- Vue是用于构建用户界面的渐进式框架。
- Vue 的核心库只关注视图层，采用自底向上增量开发的设计。
- 易于上手，Vue 也能为复杂的单页应用提供驱动。
Vue和react相同和不同：
相同点：
1、都使用虚拟dom，
2、提供了响应式和组件化的视图组件
3、注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
不同点：
1、vue具有双向绑定的数据流，react则是单向数据流，没有双向绑定
2、vue语法较简单，适合小型项目开发，上手快。react适合中大型项目开发。
3、vue倾向于html，css，js分离的写法。react则通过jsx渲染模板，html，css全部写入js中。
二．安装
-
开发环境版本，包含了有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -
生产环境版本，优化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script> -
使用npm，版本大于3.0
安装node
npm install vue
npm install --global vue-cli
vue init webpack mydemo1 //创建一个基于 webpack 模板的新项目
cd mydemo1
npm install
npm run dev
三．目录结构
四．V-if和v-show
v-if用法：和if判断类似，v-else-if也可链式多次调用。条件为true显示对应div中的内容。
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
v-show用法：和v-if一样，条件为true就显示对应div内的样式
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
v-if和v-show的区别：
- v-if 是动态添加，当值为 false 时，是完全移除该元素，即 dom 树中不存在该元素。
- v-show 仅是隐藏 / 显示，值为 false 时，该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。
- v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
- v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
- 一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
五．v-for
<div id="app">
<ol>
<li v-for="（index，site） in sites" :key="index">
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Jingdong' },
{ name: 'Pingduoduo' },
{ name: 'Taobao' }
]
}
})
</script>
sites可以是数组，也可以是对象
<div id="app">
<ul>
<li v-for="(value, key) in object" :key="key">
{{ key }} : {{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: 'baidu',
url: 'http://www.baidu.com',
slogan: '百度一下，你就知道！'
}
}
})
</script>
Key的作用：
- 在写v-for的时候,都建议给元素加上一个key属性
- key的主要作用就是用来提高渲染性能的!
- key属性可以避免数据混乱的情况出现 (如果元素中包含了有临时数据的元素,如果不用key就会产生数据混乱)
v-for和v-if不建议同时使用，在v-for中使用v-if可能导致v-if失效
在组件中使用v-for，需要使用props传递参数（详见组件基础）
数组更新检测：
Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。
六．Vue事件
<div id="app">
<!-- v-on:click 可以简写成 @click -->
<button v-on:click="say('hi')">Say hi</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
say: function (message) {
alert(message)
}
}
})
</script>
事件修饰符：
阻止单击事件冒泡
<a v-on:click.stop="doThis"></a>
提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
只有修饰符
<form v-on:submit.prevent></form>
添加事件侦听器时使用事件捕获模式
<div v-on:click.capture="doThis"></div>
只当事件在该元素本身（而不是子元素）触发时触发回调
<div v-on:click.self="doThat">...</div>
click 事件只能点击一次，2.1.4版本新增
<a v-on:click.once="doThis"></a>
按键修饰符：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
<-- Enter -->
<input @keyup.enter="submit">
<-- Alt + C -->
<input @keyup.alt.67="clear">
<-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
七．表单输入绑定
输入框：
v-model的值为输入框中绑定的值，可在data中进行初始化。
<div id="app">
<input v-model="message" placeholder="编辑我……">
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '单行输入框！',
message2: '多行输入框！'
}
})
</script>
单选复选框：
复选框：
<input type="checkbox" id="pinduoduo" value="pinduoduo" v-model="checkedNames">
<input type="checkbox" id="jingdong" value="jingdong" v-model="checkedNames">
<input type="checkbox" id="taobao" value="taobao" v-model="checkedNames">
单选框：
<input type="radio" id="baidu" value="baidu" v-model="picked">
<input type="radio" id="google" value="Google" v-model="picked">
data: {
checkedNames: ['pinduoduo'],
picked : 'baidu'
}
select下拉列表：
<div id="app">
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.baidu.com">Baidu</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">
选择的网站是: {{selected}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
.lazy
一般情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：
在“change”时而非“input”时更新
<input v-model.lazy="msg">
.number
自动将输入的值转换为数值类型
<input v-model.number="age" type="number">
.trim
自动去除输入内容的前后空格（中间不能去除）
<input v-model.trim="msg">
八．过滤器
1.内置过滤器
{{message | capitalize}} // 首字母大写
{{message | uppercase}} // 全部大写
{{message | lowercase}} // 全部小写
{{message | currency}} // 输出金钱以及小数点 <!--输出$123.47-->
{{message | currency '¥' "1"}}// 输出金钱以及小数点 <!--输出¥123.5-->
{{message | pluralize}} // 首字母大写
{{message | orderBy}} // 排序
{{message | debounce}} // 事件延迟Xms执行，需要再事件@中使用
<button id="btn" @click="disappear | debounce 5000">点击我,我将5秒后消失</button>
{{message | limitBy}} //在v-for中执行，两个参数分别是取得数量和偏移量
<ul v-for="item in lili | limitBy 10 3"> <!--输出 4 5 6 7 8 9 10 11 12 13-->
{{message | filterBy}}
data: {
lili: ["oi", "oa", "ll", "lo" ,"ouo" ,"kk" ,"oala"],
man: [ //此处注意man是数组,不是对象
{name: "lily"},{name: "lucy"},{name: "oo"},
{dada: "lsh"},{dada: "ofg"}
]}
<ul v-for="item in lili | filterBy 'o' ">
<li>{{item}}</li>
</ul>
<!--输出oi oa lo ouo oala-->
<ul v-for="item in man | filterBy 'l' in 'name' ">
<li>{{item.name}}</li>
</ul>
<!--输出lily lucy-->
<ul v-for="item in man | filterBy 'l' in 'name' 'dada' ">
<li>{{item.name+"+"+item.dada}}</li>
</ul>
<!--输出lily+undefined lucy+undefined undefined+lsh-->
2.自定义过滤器
2.1全局过滤器
必须放在new Vue()实例化前面，Vue.filter()
Vue.filter('cal', function (value, begin, xing) {
return value + begin + xing;
});
2.2 注册在实例化内部
{{message | sum | currency }}
var myVue = new Vue({
filters: {
sum: function (value) {
return value + 4;
},
}
});
九．组件基础
组件每用一次，就有一个新的实例被创建。此时该组件的data选项必须是一个函数，这样每个实例的数据就可以独立维护。
data: function () { return { count: 0 } }
在组件中使用v-for，使用v-bind动态传递prop。
解析 DOM 模板时的注意事项
有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。
而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
<table>
<blog-post-row></blog-post-row>
</table>
这个自定义组件
幸好这个特殊的 is 给了我们一个办法：解除了模板的限制元素
<table>
<tr is="blog-post-row"></tr>
</table>
浙公网安备 33010602011771号