vue知识点(一)
- 1.vue的基本格式
- 2.vue实例
- 3.v-bind绑定属性
- 4.v-on事件绑定
- 5.v-model双向绑定
- 6.v-for循环
- 7.v-if和v-show的区别
- 8.过滤器fliter
- 9.自定义键盘事件
- 10.vue项目目录结构
1.vue的基本格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
},
methods:{
}
})
</script>
</body>
</html>
首先到导入vue.js文件,可以通过网络链接导入,也可以把vue.js文件保存到本地的lib,使用时,直接script输入路径即可。
2.vue实例
存放Vue要控制的区域,data属性里面存放的时控制的区域要用到的数据,下面还有,methods(函数),computed(计算属性)等。要访问data上饿数据,或者要访问methods中的方法,必须带this。
var vm = new Vue({
el:"#app" ,// 表示当前我们new的这个Vue实例控制哪个区
data:{ //data属性中存放的是el中要用到的数据
msg : "doubleDi",
}
})
3.v-bind绑定属性
v-bind提供绑定属性命令,其中v-bind里面可以填入合法的js表达式,v-bind的简写是 ‘:'。可以绑定样式:v-bind:class v-bind:style
<input type="button" name="" id="" value="按钮" v-bind:title = "mytitle+'123'" v-on:click="show"/>
<input type="button" name="" id="" value="按钮" :title = "mytitle+'123'" v-on:click="show"/>
4.v-on事件绑定,及事件修饰符
v-on提供绑定事件的命令 简写是'@'
<!-- 使用.self触发只有点击元素才会触发 -->
<div id="app" class="inner" @click.self="div1Handler">
<!-- 使用.stop阻止冒泡 -->
<input type="button" name="" id="" value="按钮" @click.stop="btnHandler"/>
<!-- 使用.prevent阻止默认事件 -->
<a href="www.baidu.com" @click.prevent="LinkClick">股票无敌网站</a>
</div>
事件修饰符:有些事件之间是有联系的,例如,点击一个超链接,为了不让其跳转,即可使用.prevent时间修饰符来修饰click事件
.stop阻止冒泡
.prevent阻止默认事件
.capture添加事件监听器时使用事件捕捉模式
.self只当事件在该元素本身触发时回调
.once事件只触发一次
5.v-model实现数据的双向绑定
绑定之后,绑定的标签元素会自动去vue的data下寻找绑定的数据,当data修改时,标签元素会修改,当标签元素修改时,vue中data的值也会修改。注意:v-model只能运用于表单元素。
<!-- v-bind只能从M绑定到V中,不能双向 -->
<input type="text" v-bind:value="msg" name="" id="" value="" />
<input type="text" name="" id="" v-model="msg" />
6.v-for 循环对象数组
<div id="app">
<p v-for="(user,i) in list">
{{i}} {{user.id}} {{user.name}}
</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:[
{id :1,name:"zs1"},
{id :2,name:'zs2'},
{id:3,name:'zs3'},
{id:4,name:'zs4'}
]
},
methods:{
}
})
</script>
有时,为了单独区分循环的每一个元素,要在v-for中添加key属性,其中key只能时number或者string类型
<p v-for="item in list" :key = "item.id">
<input type="checkbox" name="" id="" value="" />
{{item.id}}---{{item.name}}
</p>
7.v-show 和 v-if的区别
v-if在切换时,组件会被删去,或者新建,有更高的切换消耗
v-show在切换时,组件只是被设置为不可见了,减少了切换的消耗,但对初始渲染的消耗会增加
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
8.过滤器fliter
过滤器可以按照指定的格式把data输出,或者只输出符合格式的数据
forEach,some,filter,findIndex 这些都是数组的新方法,都会数组中的每一项进行遍历,执行相关操作
// 定义一个过滤器
Vue.filter('timeFormat',function(dataStr){
// 根据给定的字符串得到特定的时间
var dt = new Date(dataStr)
var year = dt.getFullYear()
var month = dt.getMonth()+1
var day = dt.getDay()
// return year + "-"+month+'-'+day
return `${year}-${month}-${day}`
})
9.自定义的键盘事件
// 自定义按键 前面是自定义名称,后面为码值
Vue.config.keyCodes.f2 = 113
// 使用directive定义全局指令,
// 其中参数1:指令名称,注意,在定义的时候,指令的名称前面,不需要加v-前缀
// 但是有时候,必须加上v-前缀进行调用
// 参数2:是一个对象,这个对象身上,有一些指令相关的函数
Vue.directive('focu',{
bind:function(el,binding){//每当函数绑定到元素上的时候,会立即执行这个bind函数,只执行一次
// 注意:在每个函数中,第一个参数,永远是el,表示被绑定了指令的那个对象,el是原生的JS对象
el.focus()
console.log(binding.value)
console.log(binding.expression)
el.style.color=binding.value
},
inserted:function(el){//元素插入DOM中的时候,会执行inserted函数
el.focus()
},
updated:function(el){//当VDNode更新的时候,会执行updated,可能会执行很多次
el.focus()
}
})
// 和样式相关的最好在bind里面执行
// 和行为相关的最好在inserted里执行
Vue.directive('color',{
bind:function(el){
el.style.color = 'red'
},
})
10.vue项目目录结构
build--项目构建的相关代码。
config--配置目录,包括端口号等。
node_modules--npm加载的项目依赖模块
src--在主要的一个文件夹,项目开发大多都是在这个文件夹里开发
-assets:放置一些图片,如logo等
-components:存放组件文件
-App.vue:项目的入口文件
-main.js:项目的核心文件
static:静态资源文件,如:图片,字体等
index.html:首页入口文件
package.json:项目配置文件