VUE框架的初识
-
初步了解Vue.js框架（渐进式前端框架）
Vue.js是一种轻量级的前端MVVM框架。同时吸收了React（组件化）和Angular（灵活指令页面操作）的优点。是一套构建用户界面的渐进式框架，以数据驱动DOM，Vue 采用自底向上增量开发的设计。
// vue配套的一些插件
Vue Router 全局路由
Vuex 组件与组件间通信
Vue Cookie cookie的管理
// 使用Vue
导入 ==> 创建Vue对象 ==> 挂载到指定的页面标签（如果操作整个页面，可将整个页面用一个标签嵌套）
示例：<script src="js/vue.js"></script>
<script>
new Vue({
el: '.wrapper' // 只能控制检索到的第一个class为wrapper的页面结构
})
</script>
// 注意：由于挂载点与对象是一一对应的关系，所以在挂载点应该采用id来做挂载点标识，不应该用class。
-
Vue对象
vue 对象的属性有：
el： 挂载点，与页面建立联系
data：属性数据，控制挂载点属性，向页面提供数据
methods：方法，控制挂载点的事件
computed：计算属性，监听方法内部属性的改变
watch：监听属性，监听外部方法对应的属性的改变
<script>
var vue = new Vue({
el: '#app',
data: {
msg: '12345',
info: '上山打老虎'
}
});
console.log(vue.$data.msg);
console.log(vue.msg);
</script>
vue.$data.msg与vue.msg的区别？
一个被Vue对象控制的页面结构就称之为一个组件。
组件与控制该组件的Vue对象是一一对应的关系，vue.$data.msg对象的属性，vue.msg则是组件中的。？
对象的属性具体用法实例
<div id="app">
<p>
<input type="text" v-model="firstName">
</p>
<p>
<input type="text" v-model="lastName">
</p>
<input type="text" v-model="aaa">
<!--姓名 = firstName + " " + lastName-->
<h2>{{ firstName + " " + lastName }}</h2>
<!-- 将姓名替换为 firstName + " " + lastName -->
<!--<h2>{{ fullName() }}</h2>-->
<h2>{{ fullName }}</h2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
aaa: '',
firstName: '',
lastName: '',
// fullName: '姓名'
},
// methods: {
// fullName: function () {
// return this.firstName + " " + this.lastName
// }
// }
// 一个属性变量的值依赖于多个属性变量的值
// 特殊点: data绑定的属性值是固定的, computed绑定的属性值是动态的(函数的返回值)
computed: {
fullName: function () {
this.aaa;
console.log("监听到内部拥有的变量在改变");
if (this.firstName || this.lastName) {
return this.firstName + " " + this.lastName
}
return "姓名"
}
}， watch: {
// 为fullName该属性绑定了一个监听事件
// fullName的定义还是在data或computed
// fullName属性值一旦改变，绑定的监听事件就会被调用执行
// 多个变量依赖于一个变量
fullName: function () {
console.log("该方法被调用了");
f_l_arr = this.fullName.split(" ");
this.firstName = f_l_arr[0];
this.lastName = f_l_arr[1];
}
}
});computed和watch的区别：computed是监听方法内部属性变量的改变，然后影响外部的属性变量的改变，实现属性的动态的属性值。watch则是监听对应的变量的属性值是否改变。
-
Vue中的指令
vue 中指令的表示方法 V-指令
指令的类别：
文本指令： v-text v-html v-once 插值表达式 {{ }}
<p v-text="txt"></p>
<p v-html="hml"></p>
<p>{{ num + 1 }}</p>
<p>{{ num + "12345" }}</p>
<p>{{ num / 5 }}</p>
<p>{{ num + msg }}</p>
<script>
new Vue({
el: '#app',
data: {
msg: "vue的变量",
txt: "vue的text指令",
hml: "<b>vue的html指令</b>",
num: 1000
}
});
</script>
v-text 纯文本指令
v-html="hml" 解析HTML格式的文本 指令
v-once 数据一旦渲染就不能改变
插值表达式 {{ num }} 获取数据，类似于引用文本
事件指令：v-on:事件名 简写 @事件名
-- v-on="事件绑定的变量名"
-- :事件名 来设置事件触发的条件
-- 整体语法: v-on:事件名="事件绑定的变量名"
-- 事件绑定的变量名 由 methods来提供具体的方法实现
在事件指令中，变量名后可以给参数， 例如：
@click='btnClick($event, 自定义参数们)
所以在使用事件指令的更能灵活的实现不同布局切换和数据的调用
<div id="app">
<p v-on:click="action1" v-text="msg1"></p>
<p v-on:dblclick="action2" v-text="msg2"></p>
<p @mouseenter="action3" v-text="msg3" style="background: red"></p>
</div> <script src="js/vue.js"></script>
<script>
var vue = new Vue({
el: '#app',
data: {
msg1: "点击事件",
msg2: "双击事件",
msg3: "鼠标悬浮事件",
},
methods: {
action1: function () {
alert("天楚狂")
},
action2: function () {
alert("地楚狂")
},
action3: function () {
alert("人楚狂")
},
}
});
</script>
属性指令： v-bind:属性名 简写 :属性名
-- v-bind="属性绑定的变量名"
-- :属性名 来设置事件触发的条件 (style | class | 自定义属性)
-- 整体语法: v-bind:属性名="属性绑定的变量名"
-- 属性绑定的变量名 由 data来提供具体的方法实现
<div id="app">
<!-- 自定义的属性 -->
<p v-bind:owen="tag">{{ msg }}</p> <!--<a href="/static/article/{{ article.id }}"></a>-->
<a :href="url"></a>
<!--<a :href="'/add_article/' + abc"></a>-->
<a :href="'/static/article/' + aid">前往{{ aid }}篇文章</a> <button @click="btnClick">获取第100篇文章的id</button>
</div>
</body> <script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: "属性指令",
tag: 1,
url: '/static/article/1',
aid: 10
},
methods: {
btnClick: function () {
// this.$data.aid = 100;
this.aid = 100;
}
}
});
</script>
// 例子中利用了事件指令和属性指令的结合，实现了数据的改变
表单指令： 文本指令不需要绑定东西: v-text="变量名"
属性指令需要绑定属性: v-bind:属性名="变量名" => :属性名="变量名"
事件指令需要绑定事件: v-on:事件名="变量名" => @事件名="变量名"
表单指令需要绑定表单元素的value: v-model:value="变量名" => 只对value进行绑定,
-- 所以直接书写 v-model="变量名"
<body>
<div id="app">
<input type="text" value="初始value" v-model="msg">
<input type="text" value="初始value" v-model="msg">
<p>{{ msg }}</p> <!-- v-model针对于表单元素 -->
<form action="" method="get">
<!-- 1、双向绑定：服务于文本输入框 -->
<!-- v-model存储的值为输入框的value值 -->
<div>
<input type="text" name="usr" v-model="in_val">
<input type="password" name="ps" v-model="in_val" >
<textarea name="info" v-model="in_val"></textarea>
</div> <!-- 2、单选框 -->
<div>
<!-- 单选框是以name进行分组，同组中只能发生单选 -->
<!-- v-model存储的值为单选框的value值 -->
男：<input type="radio" name="sex" value="male" v-model="ra_val">
女：<input type="radio" name="sex" value="female" v-model="ra_val">
<p>{{ ra_val }}</p>
</div> <!-- 3、单一复选框 -->
<!-- v-model存储的值为true|false -->
<!-- 或者为自定义替换的值 -->
<div>
<input name="sure" type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />
{{ sin_val }}
</div> <!-- 4、多复选框 -->
<!-- v-model存储的值为存储值多复选框value的数组 -->
<div>
<input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
<input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
<input type="checkbox" value="不挑" name="cless" v-model='more_val' />
{{ more_val }}
</div> <input type="submit" value="提交">
</form> </div>
</body> <script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
info: "一次性数据",
msg: "改变后的value",
in_val: '',
// 默认值可以决定单选框默认选项
ra_val: 'male',
// 默认值为true，单一复选框为选中，反之false为不选中
sin_val: '',
// 数组中存在的值对应的复选框默认为选中状态
more_val: ['喜好女的','不挑']
},
methods: { }
});
</script>
条件指令： v-show | v-if v-else-if v-else
v-if 在消失的时候不会被渲染， v-show会以 display：none 渲染页面
<style>
p {
width: 200px;
height: 200px;
background: orange;
} [v-cloak] { display: none; } div {
width: 400px;
height: 100px;
} .red { background-color: red; }
.yellow { background-color: yellow; }
.green { background-color: green; } </style> <div id="app" v-cloak>
<!--
条件指令：
v-if
v-show
-->
<button @click="btnClick">切换</button>
<!-- v-if在消失的时候,不会被渲染, 而v-show以display: none;进行渲染 -->
<p v-if="is_open"></p>
<p v-show="is_open"></p> <hr>
<!-- 事件绑定函数, 可以加括号(), 一旦加()就代表要传入参数, 系统就不再传入事件参数 -->
<!--如果想传入事件参数, 1:不加括号 2.加括号需用$event-->
<button @click="changeColor('red', $event)">红</button>
<button @click="changeColor('yellow')">黄</button>
<button @click="changeColor('green')">绿</button>
<div class="red" v-if="color == 'red'">红体</div>
<div class="yellow" v-else-if="color == 'yellow'">黄体</div>
<div class="green" v-else>绿体</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
is_open: 0,
color: 'red'
},
methods: {
btnClick: function () {
this.is_open = !this.is_open;
},
// a1: function () {
// this.color = 'red'
// },
// a2: function () {
// this.color = 'yellow'
// } changeColor: function (color, ev) {
console.log(color);
console.log(ev); // this.color = color;
}
} });
</script>
循环指令：v-for="(ele, index) in eleArr" | v-for="(v, k, i) in dic"
<div id="app">
<!--
循环指令：v-for="obj in objs"
--> <h3>{{ list[4] }}</h3>
<h3>{{ dic['gender'] }} {{ dic.gender }}</h3> <hr> <!--遍历数组-->
<!--<p v-for="cless in list">-->
<!--<span>-->
<!--<b>{{ cless }}</b>-->
<!--</span>-->
<!--</p>-->
<p v-for="(cls, index) in list">
<span>
<b>{{ index }} : {{ cls }}</b>
</span>
</p> <!--遍历对象(字典)-->
<p v-for="(value, key, index) in dic">
<span>
<b>{{ index }} - 【{{ key }}】：{{ value }}</b>
</span>
</p> <!--复杂结构-->
<!--name:O age:8-->
<!--name:E age:58-->
<!--name:H age:7-->
<p v-for="person in pArr">
<span v-for="(v, k) in person" style="margin-right: 30px">
<b>{{ k }}</b> : <i>{{ v }}</i>
</span>
</p>
</div> <script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
list: ["语文", "数学", "英语", "编程", "吹牛逼"],
dic: {
name: 'B',
age: 18,
gender: 'male',
},
pArr: [
{
name: "O",
age: "8",
},
{
name: "E",
age: "58",
},
{
name: "H",
age: "7",
},
]
}, }); </script>
-
一个实现简易留言板的案例（todolist)
<style>
span {
background: green;
padding: 5px;
color: red;
margin-right: 20px;
border-radius: 50%;
}
</style> //样式
<div id="app">
<p>
<input type="text" v-model="txt">
<button @click="addMsg">留言</button>
</p>
<ul>
<!--<li><span>x</span>第二条</li>-->
<!--<li>第一条</li>--> 要求留言以堆栈方式展现
<li v-for="(msg, index) in msgs">
<span @click="deleteMsg(index)">x</span>
{{ msg }}
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
txt: '',
msgs: []
},
methods: {
addMsg: function () {
var txt = this.txt;
if (txt) {
// unshift shift push pop
// this.msgs.push(txt);
this.msgs.unshift(txt); //实现消息的堆栈
this.txt = '';
}
},
deleteMsg: function (index) {
this.msgs.splice(index, 1) // 删除留言， 以index作为起始位置，切一个，不给任何值
}
}
});
</script> -
事件指令和style属性结合使用
<div id="app">
<p :style="a"></p>
<p @click="btnClick" :style="{width: '200px', height: h, backgroundColor: 'red'}">变高</p>
</div>
// 根据点击事件切换不同的样式
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
a: {
width: '200px',
height: '200px',
// 'background-color': 'red'
backgroundColor: 'red'
},
h: '200px'
},
methods: {
btnClick: function () {
this.h = '300px'
}
}
});
</script> -
事件指令与class属性的使用
实现不同的类样式的切换，class属性 {类名: 是否起作用} 字典内前面是类名，而字典的value值则是代表了是否该类起作用的判断条件
<style>
.red {
width: 200px;
height: 200px;
background: red;
}
.yellow {
width: 100px;
height: 100px;
background: yellow;
}
.orange {
width: 100px;
height: 100px;
background: orange;
}
.y {
border-radius: 50%;
}
</style>
<div id="app">
<button @click="redAction">变红</button>
<button @click="yellowAction">变黄</button>
<p :class="cname"></p>
<!-- class: {}语法 => abc为类名, def为该类名的值,值可以为true|false, 代表abc是否起作用-->
<!-- {类名: 是否起作用} -->
<p :class="{abc: def}"></p>
<button @click="orangeAction">切换</button>
<p :class="{orange: is_orange}"></p>
<!-- class: []语法 => 多类名 -->
<p :class="[a, b, c]"></p>
<!--整体语法-->
<!-- x和z是变量: x值就是类名, z值决定类名y是否起作用 -->
<p :class="[x, {y: z}]"></p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
cname: '',
def: false,
is_orange: '',
a: 'aaa',
b: 'bbb',
c: 'ccc',
x: 'red',
z: true
},
methods: {
redAction: function () {
this.cname = 'red'
},
yellowAction: function () {
this.cname = 'yellow'
},
orangeAction: function () {
this.is_orange = !this.is_orange
}
}
});
</script>