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：项目配置文件
550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
