Vue的简单入门使用
一、Vue的安装和使用（idea）
vue是个前端框架。
1.安装Node
NPM（node package manage）是Node提供的模块管理工具，可以非常方便的下载安装很多的前端框架，包括jquery，AngularJS，VueJs都有，我们需要先安装node及NPM工具。
下载地址：https://nodejs.org/en/download/（nodes自带NPM）
2.安装vue
下载地址：https://github.com/vuejs/vue
3.打开idea，点击控制台Termianl按钮,对项目进行初始化
输入：npm init -y
4.安装vue
npm install vue --save
二、vue入门案例
Demo01
<div id="app">
<h2>{{name}} 非常帅h2>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
// 生成一个Vue实例
var app = new Vue({
el:"#app", // el,即element。要渲染的的页面元素
data:{ // 数据
name:"有哥"
}
})
script>
{{name}}：插值表达式，如果网速较慢，会出现插值闪烁的情况，所以我们一般不用这种插值表达式
Demo02
v-model：实现了双向绑定：num值变化，输入框中的值也会变化，反之亦然
<div id="app">
<input type="text" v-model="num">
<button v-on:click="num++">点我button>
<h2>
{{name}} 非常帅,
有{{num}}位女神为他着迷。
h2>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
// 生成一个Vue实例
var app = new Vue({
el:"#app", // el,即element。要渲染的的页面元素
data:{ // 数据
name:"有哥",
num:1
}
})
script>
三、vue实例
el表达式一般有三个属性，
el:用于绑需要渲染的页面元素
data：插值表达式的数据，可以是js表达式
methods：用于绑定触发的方法
<div id="app">
<input type="text" v-model="name"/>
<button v-on:click="add">点我button>
<br/>
div>
<script>
var vm = new Vue({
el:"#app",
data:{
name:"刘德华"
},
methods:{
add:function(){
console.log("弹弹弹，弹走鱼尾纹")
}
}
})
script>
四、生命周期
vue的生命周期提供了8个监听函数（钩子函数），但是我们经常用的一般有created，beforeUpdate这俩个监听函数
created：在vue实例创建后调用,这个监听函数是最常用的，这个时候会初始化data数据，
通常去后端取数据；（通常在这块需要写ajax请求）
五、常用的指令（vue的指令都带v-）
1.v-model：代表双向绑定，视图（view）和模型（model）之间会相互影响
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型：
input、select、textarea、checkbox、radio、components（vue中自定义的组件）
<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>
var vue = new Vue({
el:"#app",
data:{
language:[]
}
});
script>
2.**v-text:**不能解析标签
v-html:能解析标签
并且解决了插值闪烁的缺陷，v-text和v-html可以看做单向绑定，数据影响了视图渲染，但是反过来就不行了
<div id="app">
v-text:<span v-text="hello">span> <br/>
v-html:<span v-html="hello">span>
div>
<script>
var vm = new Vue({
el:"#app",
data:{
hello: "大家好，我是老方
"
}
})
script>
body>
3.v-on指令用于给页面元素绑定事件。
v-on:click='add’可以简写为@click='add’
<div id="app">
<button @click="num++">增加button><br/>
<button @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:0
},
methods:{
decrement(){
this.num--;
}
}
})
script>
4.事件修饰符
@click.stop：点击时会执行绑定的方法
@contextmenu.prevent：右键时会执行绑定的方法
<div id="app" @click="clickMe('div')" style="border: green 1px solid;width: 100px;height: 100px;">
//右击菜单事件
<button @click.stop="clickMe('btn')" @contextmenu.prevent="rightClick('哈哈哈')">点我试试button>
div>
<script>
var vue = new Vue({
el:"#app",
data:{
num:0
},
methods:{
clickMe(val){
alert("点我了"+val);
},
rightClick(val){
alert("右键"+val);
}
}
});
script>
5.案件修饰符
<div id="app">
<table border="">
<tr v-for="(user,index) in users">
<td v-text="index+1">td>
<td v-text="user.name">td>
<td v-text="user.gender">td>
<td v-text="user.age">td>
tr>
table>
div>
<script>
var vue = new Vue({
el:"#app",
data:{
users:[
{name:'柳岩', gender:'女', age: 21},
{name:'有哥', gender:'男', age: 30},
{name:'范冰冰', gender:'女', age: 24},
}
});
script>
改进版：
<div id="app">
<table border="">
<tr v-for="(user,index) in users">
<td v-text="index+1">td>
<td v-for="(value,key) in user" v-text="value">td>
tr>
table>
div>
<script>
var vue = new Vue({
el:"#app",
data:{
users:[
{name:'柳岩', gender:'女', age: 21},
{name:'有哥', gender:'男', age: 30},
{name:'范冰冰', gender:'女', age: 24},
}
});
7.隔行换色：v-if v-else
<div id="app">
<button @click="show=!show">点我呀,给你的color see seebutton>
<table v-if="show">
<tr v-for="(user,index) in users" :key="index" v-if="index%2==0" style="background-color:mediumvioletred;">
<td v-text="index+1">td>
<td v-for="(v,k) in user" v-text="v">td>
tr>
<tr v-else style="background-color:deepskyblue;">
<td v-text="index+1">td>
<td v-for="(v,k) in user" v-text="v">td>
tr>
table>
div>
<script src="node_modules/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: "#app",
data:{
users:[
{name:'柳岩', gender:'女', age: 20},
{name:'有哥', gender:'男', age: 30},
{name:'范冰冰', gender:'女', age: 24},
],
show: true
}
});
script>
8.v-bind：绑定属性样式
省略版： <style>
#box {
width: 100px;
height: 100px;
color: darkgray
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
style>
head>
<body>
<div id="app">
<button @click="boo=!boo">点击切换背景button>
<div :class="{red:boo, blue: !boo}">
点击按钮，背景会切换颜色哦
div>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
boo: true, // 一个布尔标记，判断样式是否生效
}
})
script>
9.计算属性
<div id="app">
<h1>您的生日是：{{birth}} h1>
div>
<script>
var vm = new Vue({
el:"#app",
data:{
birthday:1429032123201 // 毫秒值
},
computed:{
birth(){// 计算属性本质是一个方法，但是必须返回结果
var d = new Date(this.birthday);
return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
}
}
})
script>
10:watch监控
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>
深度监控：
如果监控的是个对象，我们就需要用到深度监控
<div id="app">
姓名：<input type="text" v-model="person.name"> <br>
年龄：<input type="text" v-model="person.age"> <button @click="person.age++">+button> <br>
<h1>
{{person.name}}今年{{person.age}}岁了。
h1>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
person:{
name:"Jack",
age:21
}
},
watch:{
person:{
deep: true, // 开启深度监控，可以监控到对象中属性变化
handler(val){ // 定义监控到以后的处理方法
console.log(val.name + ": " + val.age);
}
}
}
})
script>
六、组件
什么是组件？java的三大特征：封装继承多态，而组件就是封装的直接体现。这里的组件就是指将重复的html代码抽取出来，变成公有的部分。
1.全局组件
<div id="app">
<counter>counter>
<counter>counter>
<counter>counter>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
// 定义全局组件，两个参数：1，组件名称。2，组件参数
Vue.component("counter",{
template:'',
data(){
return {
count:0
}
}
})
var app = new Vue({
el:"#app"
})
script>
2.局部组件
<script>
var counter = {
template:'',
data(){
return {
count:0
}
}
};
var app = new Vue({
el:"#app",
components:{
counter:counter // 将定义的对象注册为组件
}
})
script>