1.v-bind和v-on的区别

v-bind绑定的函数是立即执行的

v-on是需要一定触发执行的

2.computed和methods的区别

computed的函数是设置属性的

methods的函数是设置事件的

2.如果项目不是特别的需要单页面。可以直接把vue当成是jquery使用!

3.理解数据驱动和DOM驱动:

用两个简单的例子比较一下:

这是DOM驱动的 如果是span的class名字变化的 那么这个操作就要重新编写
function text(){
return "hello world;"
}
$(".spantext").text(text());

这是数据驱动的 只要保证app和msg不变的话 span的class的名字随便变化 也是不会出错的
<div id="app"><span class="spantext">"{{msg}}</span></div>
new Vue({
el:'#app',
data:{
msg:'hello world'
}
})

4.利用vue-cli构建项目的时候:

有时候会出现以下这种错误,这种错误的原因是,在你初始化的时候有个这个问题Use ESLint to lint your code? (Y/n),你可以重新初始化将它设置为n就成了

这是因为eslint会规范js代码,错误就是你可能是多了个空格什么的

5.在实际的项目的时候,用的是export default代替new Vue

export default代替new Vue

export default({
  name:'demo',//组件的名字
data(){//初始化
return{
}
},
computed:{//一开始
save(){
}
} ,
methods:{//需要有动作
apply(){
}
}
})

6.在用vue-vli编写组件的时候,如果出现这样的问题的话

这种表示的可能是你的template中代码,需要一个根节点,你就可以在代码的最外面写一个div。当然具体问题,具体分析,我遇到的是这种情况!

7.怎样给vue中添加全局函数或者全局变量

插件utile.js

export default{

  install(Vue,options){

    Vue.prototype.getData=function(){

      console.log(‘插件’)
    }
  } } main.js 引入 并且全局注册 import util from './util' Vue.use(util); 其他组件使用 this.getDate()

8.在vue-cli中页面中的一部分是另一个页面,导入到这个页面,这个页面的编写:

需要导入的页面view.vue

<template>
<div>
...
<myview></myview>
</div>
</template>
<script>
import Myview from './view.vue'
export default {
...
components:{
"myview":Myview
}
}
</script>

这也是组件

9.在一个页面中methods中两个函数互相调用:

methods:{
a(){
...
this.b();
} ,
b(){
...
}
}

10.从一个页面加参数跳转到另一个页面?

<div class="home-every" v-for="(item,index) in homelists" :key="index" v-on:click="clickDetail(item._id)" :data-Id="item._id">
<h3 >{{item.title}}</h3>
<div style="height:30px;line-height:30px;">
<p><span><img src="static/time.png"></span>{{item.time}}</p>
<p><span><img src="static/sort.png"></span>{{item.sort==1?"文章":"随笔"}}</p>
<p><span><img src="static/user.png"></span>{{item.author}}</p>
</div>
<div style="margin-top:15px;">{{item.con}}</div>
</div> //点击进入详情页面
clickDetail(e){
this.$router.push({path:'/detail/view',params:{userid:e}})
},

  

11.在新页面加入一个页面

在router中写入

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import home from '@/components/home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login
},
{
path:'/home',
name:'home',
component:home
}, ]
})

12.vue中实现选项卡可以直接用动态组件

 

 

平时对Vue的总结的更多相关文章

  1. 聊聊VUE中的nextTick

    在谈nextTick之前,先要说明一件事,可能在我们平时使用vue时并没有关注到,事实上,vue执行的DOM更新是异步的. 举个栗子: <template> <div class=& ...

  2. 从vue源码看props

    前言 平时写vue的时候知道props有很多种用法,今天我们来看看vue内部是怎么处理props中那么多的用法的. vue提供的props的用法 1. 数组形式 props: ['name', 'va ...

  3. vue组件is属性详解

    查看官网对is属性的讲解,请移步:vue.js 本文参考资料 在vue.js组件教程的一开始提及到了is特性 下面是官网对is属性使用的说明: 组件功能是vue项目的一大特色.组件可以扩展html元素 ...

  4. 详解vue组件的is特性:限制元素&动态组件

    在vue.js组件教程的一开始提及到了is特性 意思就是有些元素,比如 ul 里面只能直接包含 li元素,像这样: <ul> <li></li> </ul&g ...

  5. Vue源码翻译之渲染逻辑链

    本篇文章主要要记录说明的是,Vue在Vdom的创建上的相关细节.这也是描绘了Vue在界面的创建上的一个逻辑顺序,同时我也非常拜服作者编码的逻辑性,当然或许这么庞大复杂的编码不是一次性铸就的,我想应该也 ...

  6. Vue相关问题

    1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter, ...

  7. Vue SSR初探

    因为之前用nuxt开发过应用程序,但是nuxt早就达到了开箱即用的目的,所以一直对vue ssr的具体实现存在好奇. 构建步骤 我们通过上图可以看到,vue ssr 也是离不开 webpack 的打包 ...

  8. Vue学习系列(四)——理解生命周期和钩子

    前言 在上一篇中,我们对平时进行vue开发中遇到的常用指令进行归类说明讲解,大概已经学会了怎么去实现数据绑定,以及实现动态的实现数据展示功能,运用指令,可以更好更快的进行开发.而在这一篇中,我们将通过 ...

  9. 基于Vue的工作流项目模块中,使用动态组件的方式统一呈现不同表单数据的处理方式

    在基于Vue的工作流项目模块中,我们在查看表单明细的时候,需要包含公用表单信息,特定表单信息两部分内容.前者表单数据可以统一呈现,而后者则是不同业务的表单数据不同.为了实现更好的维护性,把它们分开作为 ...

随机推荐

  1. BootStrap2学习日记23---弹出对话框

    <a href="#login" data-toggle="modal" class="btn btn-primary">登陆& ...

  2. 滴水穿石 C#中多线程 委托的使用

    什么是多线程?我们在建立以个C#项目时,往往会在Form1上添加控件,然后写代码,初 学者都是在重复这个过程,其实这个过程是单线程的,可以理解为只有“main”主线程,有 的时候往往需要同时测量多个东 ...

  3. java二分法查找实现代码

    package util; class BinarySearch { static int binarySearch(int[] array,int goal){//传入排好序的数组和目标数字 int ...

  4. hdu 2147 kiki's game(巴什博弈)

    kiki's game HDU - 2147 题意:一个n*m的表格,起始位置为右上角,目标位置为左下角,甲先开始走,走的规则是可以向左,向下或者向左下(对顶的)走一格.谁先走到目标位置谁就胜利.在甲 ...

  5. Mysql-4-数据库的基本操作

    1.创建数据库 create database database_name; 例:create database aa; show create database aa;(查看database aa) ...

  6. Android进阶书籍推荐

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/124 Android进阶书籍推荐 端午节前我写了drake ...

  7. 记一次工作中的小BUG

    今天在调试代码的时候总是遇到一个bug,百思不得其解!先上bug图 我用的webapi 集成的swagger,错误提示是路由名称冲突,可我仔细检查了下并没有冲突的路由地址啊!于是上网查找资料,有位网友 ...

  8. C. Increasing by Modulo

    给定n个模m的数字 可以选择k个数字进行操作,操作时对该数字进行+1模m 求解最少多少次操作可以使得该数列变成单调不下降序列 实际上就是二分操作数目,其中操作数目肯定不会超过m 然后我们将左右边界变成 ...

  9. sysbench压力测试总结

    sysbench压力测试工具简介sysbench是一个开源的.模块化的.跨平台的多线程性能测试工具,可以用来进行CPU.内存.磁盘I/O.线程.数据库的性能测试.目前支持的数据库有MySQL.Orac ...

  10. 6、python数据类型之元组(dict)

    字典字典的每个元素就是一个键值对,格式如下key:value{key1:value1,key2:value2,......} 1.创建 dict_eg = { "name":&qu ...