Vue入门学习
1. 安装node.js 查看node和npm版本是否安装成功
node -v
npm -v
npm默认仓库很慢，我们切换阿里的
npm install nrm -g
nrm use taobao
nrm test taobao 该用来测试淘宝仓库速度
重启
2. 创建一个static web工程，然后在terminal里面使用npm安装vue
npm init -y
npm install vue --save
目录中出现node_modules目录，里面有个vue
<script src="./node_modules/vue/dist/vue.js"></script>把js引入到html中
3.建立个html页面 插入以下内容
<div id="app"> <h2>{{name}}</h2>//花括号插值表达式，从data中取数据 </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> let vm = new Vue({ el:"#app", // el,即element。要渲染的的页面元素 data:{ // 数据 name:"taft" } }) </script>
v-model:双向绑定。其实就是给某一变量赋值
<div id="app"> <input type="text" v-model="num"> <h2> 数字是：{{num}} </h2> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ num:1 } }) </script>
v-on:事件处理
<div id="app"> {{num}} <button v-on:click="add">加</button> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ num: 0 }, methods:{ add:function(){ // this代表的当前vue实例 this.num++; } } }) </script>
4.Vue的生命周期：new Vue() -> beforeCreate -> created -> beforeMount -> mounted -> beforeDestory -> destory
var vm = new Vue({ el:"#app", data:{ hello: '' // hello初始化为空 }, created(){ this.hello = "hello world"; } })
5.指令
5.1 {{表达式}} 使用v-text和v-html指令来替代{{xxxx}}，会出现插值闪烁现象，如果网特别卡的情况下，会先出现括号再变成值
<div id="app"> v-text:<span v-text="hello"></span> <br/> v-html:<span v-html="hello"></span> //可以自动编译标签 </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ hello: "<h1>大家好，我是taft</h1>" } }) </script>
5.2 v-mdoel ，不仅可以绑定一个变量，还可以绑定一个数组变量。
<div id="app"> <input type="checkbox" v-model="language" value="Java" />Java<br/> <input type="checkbox" v-model="language" value="PHP" />PHP<br/> <input type="checkbox" v-model="language" value="Swift" />Swift<br/> <h1> 你选择了：{{language.join(',')}} </h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ language: [] } }) </script>
5.3 v-on v-on:事件名="js片段或函数名"
<div id="app"> <!--事件中直接写js片段--> <button v-on:click="num++">增加</button><br/> <!--事件指定一个回调函数，必须是Vue实例中定义的函数--> <button v-on:click="decrement">减少</button><br/> <h1>num: {{num}}</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ num:1 }, methods:{ decrement(){ this.num--; } } }) </script>
事件修饰符
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
组合按钮
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
5.4 v-for 遍历变量
<div id="app"> <ul> <li v-for="user in users"> {{user.name}} : {{user.gender}} : {{user.age}} </li> </ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ users:[ {name:'柳岩', gender:'女', age: 21}, {name:'社会我拓哥', gender:'男', age: 30}, {name:'范冰冰', gender:'女', age: 24}, {name:'刘亦菲', gender:'女', age: 18}, {name:'古力娜扎', gender:'女', age: 25} ] } }) </script> <div id="app"> <ul> <li v-for="(user,index) in users"> {{index+1}} - {{user.name}} : {{user.gender}} : {{user.age}} </li> </ul> </div> <div id="app"> <ul> <li v-for="(value,key,index) in user"> {{index}} - {{key}} : {{value}} </li> </ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ user:{name:'柳岩', gender:'女', age: 21} } }) </script>
5.5 v-if 布尔表达式
<div id="app"> <!--事件中直接写js片段--> <button v-on:click="show = !show">点击切换</button><br/> <h1 v-if="show"> 你好 </h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ show:true } }) </script>
5.6 v-bind 绑定
<div v-bind:class="isActive"></div> data:{ isActive:['active','hasError'] }
这里就是相当于<div class="active hasError"></div>
5.7计算属性
<div id="app"> <h1>您的生日是：{{birth}} </h1> </div> var vm = new Vue({ el:"#app", data:{ birthday:1429032123201 // 毫秒值 }, computed:{ birth(){// 计算属性本质是一个方法，但是必须返回结果 const d = new Date(this.birthday); return d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate(); } } })
5.8 watch监控
<div id="app"> <input type="text" v-model="message"> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ message:"" }, watch:{ message(newVal, oldVal){ console.log(newVal, oldVal); } } }) </script>
6.组件
6.1 全局注册：Vue.component()是定义的全局组件
<div id="app"> <!--使用定义好的全局组件--> <counter></counter> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> // 定义全局组件，两个参数：1，组件名称。2，组件参数 Vue.component("counter",{ template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>', data(){ //组件的data属性必须是函数！ return { count:0 } } }) var app = new Vue({ el:"#app" }) </script>
- 要在父实例中使用某个组件，组件必须在实例之前定义
- 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
- 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
- 组件渲染需要html模板，所以增加了template属性，值就是HTML模板，模版的内容必须由html双标记包裹
- 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
- data的定义方式比较特殊，必须是一个函数。
6.2 局部注册：components{}
const counter = { template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>', data(){ return { count:0 } } }; var app = new Vue({ el:"#app", components:{ //components就是当前vue对象子组件集合。 counter:counter // 将定义的对象注册为组件 } })
6.3 组件通信
组件通过props接收父组件的值
<div id="app"> <h1>大家好给大家介绍一下：</h1> <!--使用子组件，同时传递title属性--> <introduce title="社会我拓哥"/> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component("introduce",{ // 直接使用props接收到的属性来渲染页面 template:'<h1>{{title}}</h1>', props:['title'] // 通过props来接收一个父组件传递的属性值 }) var app = new Vue({ el:"#app" }) </script> let myList = { template:` <ul> <li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li> </ul>`, props:{ items:{ type:Array, default:[] } } } <div id="app"> <h2>传智播客已开设如下课程：</h2> <!-- 使用子组件的同时，传递属性，这里使用了v-bind，指向了父组件自己的属性lessons --> <my-list :items="lessons"/> </div> var app = new Vue({ el:"#app", components:{ myList // 当key和value一样时，可以只写一个 }, data:{ lessons:[ {id:1, name: 'java'}, {id:2, name: 'php'}, {id:3, name: 'ios'}, ] } })
子组件通过$emit函数调用父组件的函数
<div id="app"> <h2>num: {{num}}</h2> <!--使用子组件的时候，传递num到子组件中--> <counter :num="num"></counter> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component("counter", {// 子组件，定义了两个按钮，点击数字num会加或减 template:'\ <div>\ <button @click="num++">加</button> \ <button @click="num--">减</button> \ </div>', props:['num']// count是从父组件获取的。 }) var app = new Vue({ el:"#app", data:{ num:0 } }) </script> var app = new Vue({ el:"#app", data:{ num:0 }, methods:{ // 父组件中定义操作num的方法 increment(){ this.num++; }, decrement(){ this.num--; } } })
<div id="app"> <h2>num: {{num}}</h2> <counter :count="num" @inc="increment" @dec="decrement"></counter> </div> Vue.component("counter", { template:'\ <div>\ <button @click="plus">加</button> \ //通过v-on指令将父组件的函数绑定到子组件上： <button @click="reduce">减</button> \ </div>', methods:{ plus(){ this.$emit("inc"); //vue提供了一个内置的this.$emit函数，用来调用父组件绑定的函数 }, reduce(){ this.$emit("dec"); } } })
浙公网安备 33010602011771号