vue
一个vue文件通常由三部分构成,其最终输出结果等同于html。
- 【template】:html的模板,真正的DOM结构,不同点是支持vue指令,由script和stype来调整,也可以是纯粹的html。
- 【script】:js脚本,用于修改template的数据。
- 【style】:css样式,用于修改template的样式。
- 【components】:依赖组件。
一个vue可以称作为一个组件,更准确的说,一个包含了template的变量就是一个组件。
一个组件本身也是一个实例,
核心手册:
-
使用变量:
{{ param }}
, 在指令中可以直接引用变量(v-if="param"
) -
数据处理:
data(){ return {} }
-
缓存计算:
computed:{ 方法名:function(param) }
-
绑定数据:
v-bind:变量=依赖属性
-
监听事件:
v-on:事件名=依赖处理器
-
触发事件:
$emit(事件接收器, 参数)
-
传递数据:
props:[父属性]
-
监听数据:
watch:{ k:function(v) }
-
搭建面板:去element-ui官网拷贝代码放入template中修改
-
请求接口:
request({ url: '/api/v1/articleList', method: 'get', params: query }).then(response=>{ response.data.total_amt })
-
实现跳转:
<router-link to='two.html'><button>跳转</button></router-link> this.$router.push({ path:'/two.html' }) this.$router.go(-1); // 返回上一页
-
动态渲染:
// 实际渲染组件由currentRole属性值决定 <component :is="currentRole" /> data() { return { currentRole: "实际组件名" }; }
-
元素唯一key属性:
// 作用1:让Vue记住这个元素及其渲染时的顺序,当新增或修改时能直接定位增量,而不用全部重渲染 <div v-for="(value, key, index) in numbers" :key="index"> {{ value }} </div> // 作用2:强制替换元素,key所指定的元素发生变化时,触发生命周期钩子或者过渡,Vue新建一个元素来替换掉原有的元素 <transition> <span :key="text">{{text}}</span> // 如果text发生改变,整个<span>元素会发生更新 </transition>
0、经验理解
export default
:默认输出,一个组件只能写一个default,变量名就变成任意的了。import 任意名字 from 用default的子组件
:子组件必须包含export,如果是default,则import的名字任意起,且不需要加’{}’redirect:'/dashboard'
:在某一级路由下添加redirect重定向,会自动跳转,如果添加的重定向还是子级路由时,相当于自动点击到子页面。computed vs methods
:计算属性的好处是有对于其依赖的缓存机制,即依赖的值不变,则直接返回缓存;而method总是重新计算。
1、指令
在表达式的值改变时,将某些行为应用到 DOM 上。
<p v-if="seen">现在你看到我了</p>
<h1 v-show="seen">现在你看到我了</h1>
2、参数
在指令后以冒号指明。
<!--【v-bind】指令被用来响应地更新 HTML 属性-->
<a v-bind:href="url">菜鸟教程</a>
<a :href="url">菜鸟教程</a> <!--缩写形式-->
<!--【v-on】指令,用于监听 DOM 事件-->
<a v-on:click="doSomething">
<a @click="doSomething"> <!--缩写形式-->
3、修饰符
以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
<!--告诉 v-on 指令对于触发的事件调用 event.preventDefault()-->
<form v-on:submit.prevent="onSubmit"></form>
4、用户输入
【v-model】指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。
<!--输入数据送入到【v-model】指定的变量中-->
<input v-model="message">
5、过滤器
使用管道符’|'进行过滤传递处理。
<div id="app">
{{ message | filterA('arg1', arg2) }} <!--message是隐含第一个参数arg0,第二个参数arg1,第三个参数arg2-->
</div>
生命周期:
element-ui
响应式布局
参考bootstrap的响应式,预设四个尺寸,都分为1-12份
xs <768px
sm ≥768px
md ≥992
lg ≥120
如超小屏一行展示1个,小屏时一行展示2个,中屏时一行显示3个,大屏时一行显示6个
xs:‘12’ sm:‘6’ md:‘4’ lg:‘2’
插槽
< template slot-scope="scope" >{{ scope.$index }} {{ scope.row }}</template>
// slot-scope="scope":接收一个单元格对象到scope变量中
// scope.$index:单元格对应的索引编号
// scope.row:单元格对应的数据对象
// scope.row.Name:单元格对应的数据对象的Name属性