vue 学习笔记
- Less 使用
1. 安装less cnpm install less --save-dev
2. 安装less加载文件 less-loader cnpm install less-loader --save-dev
3. 去配置文件 webpack.config.js 文件去modules rules 里面添加相同的规则
{ test: /\.less$/, loader: "style-loader!css-loader!less-loader" }
4. 外部css的使用<style lang="less"> //当前组件加载外部的css 使用@import 加载 //如果写less 在style 上添加属性lang="less" scope 限制作用域 @import url("./assets/app.less"); </style> - 基本语法
script：当前组件的代码区域
export default ：暴露出当前模块
name ：指当前组件的名称
data ：为整个组件的数据模块
<template>
<!--
注意：组件里面只能有一个父元素
-->
<div id="app">
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
msg: "Welcome to Your Vue.js App" //定义的数据
};
}
};
</script>
注意：在项目上可以配置public 或者static 为静态的资源目录
-
vue 常用指令
- 数据绑定/属性绑定
绑定数据表达式 {{}}
v-html v-text 绑定元素的文本值
v-html 可以自动解析字符串标签
v-text 直接以文本显示
<template> <div id="app"> <!--变量的绑定--> <p>{{msg}}</p> <!--对象的绑定--> <p>{{obj.name}}</p> <!--数组绑定 循环输出--> <ul> <!--在使用v-for时添加key属性 保持唯一性--> <li v-for="(item,index) in list" :key="item"> {{item+"/"+index}} </li> </ul> </div> </template> <script> export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App', obj:{ name:"张三" }, list:[ 1,2,3,4 ] } } } </script> <style lang="scss"> </style>- v-model
绑定表单元素值的 — 数据双向绑定
<template> <div id="app"> <p> <input type="text" v-model="msginfo" /> </p> <p>{{msginfo}}</p> </div> </template> <script> export default { name: 'app', data () { return { msginfo: "数据双向", } </script> <style lang="scss"> </style>- v-bind
绑定属性的 — 单向绑定
简写 — :title=""
<template> <div id="app"> //Class 绑定 //对象语法 <div v-bind:class="{ active: isActive }"></div> //数组语法 <div v-bind:class="[activeClass, errorClass]"></div> //三元表达式 <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> //数组语法中也可以嵌套对象语法 <div v-bind:class="[{ active: isActive }, errorClass]"></div> //Style 绑定 //对象语法 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> <div v-bind:style="styleObject"></div> //数组语法 <div v-bind:style="[baseStyles, overridingStyles]"></div> </div> </template> <script> export default { name: 'app', data () { return { isActive: true, hasError: false, activeClass: 'active', errorClass: 'text-danger', activeColor: 'red', fontSize: 30, styleObject: { color: 'red', fontsize: '13px' } } </script> <style lang="scss"> </style>注意：当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
- 循环渲染数据
<template> <div id="app"> <ul> <!--在使用v-for时添加key属性 保持唯一性--> <li v-for="(item,index) in lists" :key="item"> {{item.title+"/"+index}} </li> </ul> <ul> <!--在使用v-for时添加key属性 保持唯一性--> <li v-for="(item,index) in listnews" :key="item"> {{item.title+"/"+index}} <ol> <li v-for="a in item.list" :key="a"> {{a.title}} </li> </ol> </li> </ul> </div> </template> <script> export default { name: 'app', data () { return { lists:[ {"title":"1"}, {"title":"1"}, {"title":"1"}, {"title":"1"} ], listnews:[ { "title":"水果", list:[ {"title":"苹果"} ] } ] } } } </script> <style lang="scss"> </style>- 条件渲染指令
v-if 、v-else 、v-else-if<template> <div id="app"> <p v-if="btn">我在看你</p> <p v-else-if="btn==0">我在看你</p> <p v-else>我不看你</p> </div> </template> <script> export default { name: 'app', data () { return { btn: true } } } </script> <style lang="scss"> </style> - 显示隐藏
v-show 显示
v-hide 隐藏<template> <div id="app"> <p v-show="num==0?true:false">我是显示的</p> <p v-show="num!=0?true:false">我是隐藏的</p> </div> </template> <script> export default { name: 'app', data () { return { num: 0 } } } </script> <style lang="scss"> </style>
- 数据绑定/属性绑定
-
vue 事件以及获取dom元素（虚拟）
v-on:事件类型 @事件类型
事件的修饰符 :
1 .stop 阻止事件传播
2 .prevent 组件重载页面
3 .self 阻止事件不从内部触发
4 .once 事件触发一次- 事件对象 定义方法 执行方法 数据的相关操作
键盘事件e的相关参数e.target e.srcElement e.keyCode e.which e.key e.code
鼠标事件e的相关参数 e.timeStamp 触发的事件间隔 e.clientX/e.clientY e.pageX/e.pageY e.target/e.srcElement
<template> <div id="app"> <!-- vue 事件的绑定 --> <button v-on:click="getmsg">事件绑定一</button> <button @click="getmsg">事件绑定二</button> <!-- 事件对象 --> <button data-aid="123" @click="getEventdata">输出事件的对象</button> <!-- 定义方法 使用方法 操作数据 修改数据 --> <button @click="changeData">获取数据</button> <!-- 在重复对象的时候 注意key键值的问题 --> <ul v-for="(a,index) in arrlist" :key="index"> <li @click="clickli(index)">{{a.title+" "+index}}</li> </ul> <!-- 在使用方法的时候可以方法传值 --> </div> </template> <script> export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App', arrlist:[] } }, methods:{ getmsg(){ console.log(1); }, getEventdata(e){ console.log(e); //通过事件对象获取dom元素节点 srcElement console.log(e.target); //也可以通过事件对象获取dom元素的自定义属性 console.log(e.srcElement.dataset.aid); }, changeData(){ for(var i=0;i<10;i++) { this.arrlist.push({ title:i }); } }, clickli(index){ console.log(index); } } } </script> <style lang="scss"> </style>注意：事件.self：相当事件的委托，当前的触发元素是自身的时候 才能执行当前事件的函数
.capture 类似原生的js里面的事件的捕获 事件从外向里执行- MVVM 结构
<template> <div id="app"> <!-- MVVM 结构 MV 指model数据改变影响view VM指view数据改变影响model --> <input type="text" v-model="msg"> <button v-on:click="getMsg">获取改变的值</button> <button @click="setMsg">设置msg的值</button> </div> </template> <script> export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App', } }, methods:{ getMsg(){ alert(this.msg); }, setMsg(){ this.msg="我是修改之后的"; } } } </script> <style lang="scss"> </style>- ref获取操作的dom元素节点
<template> <div id="app"> <!-- 通过ref获取dom元素节点 --> <input type="text" ref="txt"> <button @click="getDom">获取dom元素的操作节点</button> </div> </template> <script> export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App', } }, methods:{ getDom(){ //获取dom元素节点 console.log(this.$refs.txt.value); } } } </script> <style lang="scss"> </style> - 事件对象 定义方法 执行方法 数据的相关操作
-
vue 过滤器
- 过滤器常规写法
<template> <div id="app"> <p>{{arr | mysort}}</p> <input type="text" v-model="txtsex" /> <p>{{sex | changeSex(txtsex)}}</p> </div> </template> <script> export default { name: 'app', data () { return { changeSex(val, args1) { //过滤 let arr = []; for (let key of val) { if (key === args1) { arr.push(key); } } return arr; } } } } </script> <style lang="scss"> </style>- v-for写法
<template> <div id="app"> <p> <span v-for="(item,index) in forSort()" :key="index">{{item}}</span> </p> </div> </template> <script> export default { name: 'app', data () { return { mysort(val) { //过滤器 里面返回值 //在返回之前对值进行过滤 //val 代表管道符前面的值 let [...array] = [...val]; array.sort((a, b) => { return b - a; }); return array; } } } </script> <style lang="scss"> </style>
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
