qq_49104166的博客

1.先安装node和npm2.安装npm install -g @vue/cli3.查看版本号4.npm i -g @vue/cli-init5.vue init webpack vue项目名称。项目描述。作者。Vue build – 打包方式，回车即可；　Install vue-router – 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车。Use ESLint to lint your code – 是否需要 js 语法检测 。；Set up unit tests --

生命周期函数，代码运行从开始到结束的过程<div id="app"> {{message}} </div> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:'hellow vue' }, //实例初始化之后，数据观测（data observer）和 event/watcher 事件配置之前被调用

v-bind：属性名可以简写成 ：属性名，v-bind用于绑定数据和元素属性样式<style type="text/css"> p{ width: 200px; height: 200px; border: 1px solid blue; } .bg{ background-color: darkseagreen; } .color{ color: gray; } </style> HTML和

v-model本质上是一个语法糖，一个input框改变，其他的也会跟着改变下面使用侦听器进行单位的换算监听属性时要写函数的方式，每次属性发生改变，这个函数就会执行<div id="app"> <input type="text" v-model="cm" /><br /> <input type="text" v-model="dm" /><br /> <input type="text" v-model="mm"

.stop是阻止默认事件， .once是只执行一次默认事件是从内由外<div id="app"> <button>点击隐藏</button> <div @click.once="fn">div标签 <p @click.stop.once="fn">p标签 <a @click.stop.once="fn($event)">a标签</a> </p> </div&g

父组件向子组件传值<div id="app"> <!--<myvues></myvues>--> <!--传的动态的值v-bind绑定《msg--> <myvue v-bind:a="msg"></myvue> </div> <!--<div id="con"> <myvue></myvue> </div>-->

<div id="app"> <ul> <!--<li v-for="(v,i) in arr"> {{v}} </li>--> <!--当键一样时取出的只有一个--> 键 值 索引 <li v-for="(val,key,i) in obj"> {{val}} {{key}} {{i}} </li> <!

computed与methods<div id="app"> {{msg1}} <p>{{resMsg()}}</p> </div> <script type="text/javascript"> var app=new Vue({ el:'#app', data:{ msg1:"WORLD" }, //调用的属性 //计算属性 会做缓存 computed: