vue笔记

一、动画

mode="out - in" 或者 mode="in - out"

二、地址　　localhost:8080==>lacolhost:8080/app

var routes : [

　　{

　　　　path :"/",

　　　　redirect:"/app"

　　}

]

三、计算属性的理解

data的基础上再派生一些状态的时候，就会使用computed来实现。

state的基础上再派生一些状态的时候，就会使用getters来实现。

const app = new Vue({

　　el:"#app",

　　data:{}，

　　computed:{}

})

const store = new Vuex.Store({

　　state:{ },

　　getters:{}

})

四、target.dataset

　　<button  data-hmtdid="101"></button>

　　console.log(e.target.dataset.hmtdid); 　　//输出结果：101

五、eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

　　var field_test = '我是字符串拼接';

　　var lang = 'field';

　　console.log(lang + '_test');　　　　　　// 结果 'field_test'

　　console.log(eval(lang + '_test'));　　　　// 结果 '我是字符串拼接'

六、教手架的使用 

　　安装cnpm 官网：http://npm.taobao.org/ 

　　　　cnpm install -g @vu   npm install -g cnpm --registry=https://registry.npm.taobao.org

　　安装vue Vue-CLI官网：

　　　　cnpm install -g @vue/cli 

　　项目初始化

　　　　vue create hello-world

　　运行项目

　　　　cd hello-world

　　　　npm run serve

　　代码结构  

　　　　index.html：应用的入口文件

　　　　main.js：主js文件，初次渲染时执行

　　　　App.vue：根组件，在main.js中加载

六、ref获取dom高度

　　html

　　　　<div ref="aa" style="height:100px">aa</div>
　　　　<div ref="bb">bb</div>
　　　　<p :class='this.aaheight>this.bbheight?"aa":"bb"'>{{ message }}</p>

　　js

　　　　mounted(){
　　　　　　this.aaheight = window.getComputedStyle(this.$refs.aa).height
　　　　　　this.bbheight = window.getComputedStyle(this.$refs.bb).height
　　　　}

 七、获取字符串指定位置

　　例如获取 ss="80%;height:30%;padding:8px"

　　　　this.style.split(":")[this.style.split(":").indexOf("width")+1]

 

 八、this.style.split(":")[this.style.split(":").indexOf("width")+1] Module build failed: Error: Missing binding C:UsersAdministratorDesktop新建文件夹mall ode_modules ode-sassvendorwin32-x64-64inding.node

　　解决办法：npm i node-sass