Vue学习笔记——Vue个人小结

女爷i 2022-05-19 02:52 189阅读 0赞

1、 Vue.directive('自定义标签名称，如v-stephen', function(**el,binding**)\{

el.style='color:'+binding.value;

\})

2、Vue.extend()：定义的是静态标签，没有传递任何参数

写法两种：

(1). 定义标签法：<author></author>      // 不带任何属性

(2). 挂载在普通标签中：<div id＝"author"></div>     // 普通标签中

上述两种方法定义静态标签必须使用

<table style="width:363px;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;vertical-align:top;"> new authorExtend().$mount('#author'); //普通id法 </td> 
 </tr> 
 </tbody> 
</table>

<table style="width:363px;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;vertical-align:top;"> new authorExtend().$mount('author'); //标签法 </td> 
 </tr> 
 </tbody> 
</table>

对标签进行初始化

JS:

var authorExtend = Vue.extend(\{

template:"<a    :href="authorUrl">\{ \{authorName\}\}</a>",

data:function()\{

return\{

authorName:'Stephen',

authorUrl:'[http://www.baidu.com][http_www.baidu.com]'      // 这里http的传输协议必须加上

\})

3、Vue.set

***Vue.set(app.arr,1,'ddd');***

4、template标签写在选项（Vue）里，使用\`\`符号括在其中，\`\`是Tab按键上的。

5、组件分为全局组件（在JavaScript里定义Vue.comonent(...)）、局部组件（在选项（Vue）里定义的components:\{...\}）

6、组件属性的定义

**props:\['here'\]**

7、父子组件嵌套

var jspang = \{

template:\`<div>

Panda from China!

</div>\`,

components:\{

"city":city

8、component标签

<table style="width:363px;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;vertical-align:top;"> &lt;component v-bind:is="who"&gt;&lt;/component&gt; </td> 
 </tr> 
 </tbody> 
</table>

9、template标签

<table style="width:363px;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;vertical-align:top;"> &lt;script type="x-template" id="demo3"&gt; </td> 
 </tr> 
 </tbody> 
</table>

10、propsData 在**全局扩展**时进行**传递数据**

new header\_a(\{propsData:\{a:1\}\}).$mount('header');

11、computed 对原数据进行**改造输出（**包括**格式**的编辑**，****大小写**转换，**顺序**重排，添加**符号**……）

computed:\{

newPrice:function()\{

return this.price='￥' + this.price + '元';

**12、**methods选项中构造器里的原生事件

13、子路由的配置：

children:\[

\{path:'/',component:Hi\},

\{path:'hi1',component:Hi1\},

\{path:'hi2',component:Hi2\},

14、参数传递

1、route.name传值

// router/index.js

routes: \[

path: '/',

name: 'Hello',

component: Hello

//  components/Hello.vue

\{ \{ $route.name\}\}

2、route-link标签传值

// app.vue

<router-link :to="\{name:'hi1',params:\{username:'jspang'\}\}">Hi页面1</router-link>

// router/index.js

\{path:'/hi1',name:'hi1',component:Hi1\}

// components/Hi1.vue

\{ \{$route.params.username\}\}

15、单页面多路由：一个vue文件中存放多个route-view

// app.vue

<router-view ></router-view>

<router-view name="left" style="float:left;width:50%;background-color:\#ccc;height:300px;"></router-view>

<router-view name="right" style="float:right;width:50%;background-color:\#c0c;height:300px;"></router-view>

// route/index.js

routes: \[

path: '/',

** components: \{**

**        default:Hello,**

**        left:Hi1,**

**        right:Hi2**

**      \}**

\},\{

path: '/Hi',

**components: \{**

**        default:Hello,**

**        left:Hi2,**

**        right:Hi1**

**      \}**

16、url传递参数

// index.js

path:'/params/**:newsId**/**:newsTitle**'

// app.vue

<router-link to="/params/198/jspang website is very good">params</router-link>

//components下vue文件引用

新闻ID：\{ \{ $route.params.newsId\}\}

新闻标题：\{ \{ $route.params.newsTitle\}\}

正则：path:'/params/:newsId(\\\\d+)/:newsTitle' // 只允许newsId为数字

17、重定向和别名

// index.js

path:'/goback',

**redirect:'/'**

// 别名

path: '/hi1',

component: Hi1,

alias:'/jspang'

18、过度动画

<router-view ></router-view>

</transition>

19、404页面处理

**path:'\*',**

component:Error

20、模板中的钩子函数

**beforeRouteEnter:(to,from,next)=>**\{

console.log("准备进入路由模板");

next();

\},

**beforeRouteLeave:(to, from, next)=>** \{

console.log("准备离开路由模板");

next();

21、编程式导航：

methods:\{

goback()\{

**      this.$router.go(-1); //返回**

**      this.$router.go(1);//前进**

**      this.$router.push('/');//返回首页**

[http_www.baidu.com]: http://www.baidu.com/

Vue学习笔记——Vue个人小结

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Vue学习笔记

相关 Vue学习笔记

相关 vue学习笔记

相关 vue学习笔记

相关 vue-学习笔记

相关 vue学习笔记

相关笔记 vue.js循环语句小结

相关 Vue学习笔记——Vue-router

相关 Vue学习笔记——Vue个人小结

相关 Vue 学习笔记