⼆⼗七、python学习之前端（⼗）：Vue⼊门
⼀、vue简介:
1.vue简介:
Vue.js是前端三⼤新框架：Angular.js、React.js、Vue.js之⼀，Vue.js⽬前的使⽤和关注程度在三⼤框架中稍微胜出，并且它的热度还在递增。
Vue.js可以作为⼀个js库来使⽤，也可以⽤它全套的⼯具来构建系统界⾯，这些可以根据项⽬的需要灵活选择，所以说，Vue.js是⼀套构建⽤户界⾯的渐进式框架。
Vue的核⼼库只关注视图层，Vue的⽬标是通过尽可能简单的 API 实现响应的数据绑定，在这⼀点上Vue.js类似于后台的模板语⾔。 Vue也可以将界⾯拆分成⼀个个的组件，通过组件来构建界⾯，然后⽤⾃动化⼯具来⽣成单页⾯(SPA - single page application)系统。
2.Vue.js使⽤⽂档及下载Vue.js
⼆、Vue.js基本概念
##1. vue.js的概述:
vue.js和JQuery.js都是js封装的模块;
各有各的特点，但是现在⽤vue的⼈越来越多;
Vue.js的特点:a. 没有DOM的概念; b.以数据驱动为核⼼
Vue.js操作的特点:
a.script标签中Vue对象⾥⾯定义变量和⽅法;
b.在标签上，操作变量或者⽅法;
c.和JQ使⽤的思路不同;
2.vue的格式:
每个 Vue 应⽤都是通过实例化⼀个新的 Vue对象开始的：
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
html空格代码按钮data:{
message:'hello world!'
}
})
}
</script>
<body>
<!-- 2.标签上⾯操作变量和⽅法。 -->
<!-- {{ 变量 }}: mustache语法; 胡⼦语法! -->
<div id="app">{{ message }}</div>
</body>
其中，el属性对应⼀个标签，当vue对象创建后，这个标签内的区域就被vue对象接管，在这个区域内就可以使⽤vue对象中定义的属性和⽅法。
3.数据与⽅法
当⼀个 Vue 实例被创建时，它向 Vue 的响应式系统中加⼊了其data对象中能到的所有的属性。当这些属性的值发⽣改变时，视图将会产⽣“响应”，即匹配更新为新的值。还可以在Vue实例中定义⽅法，通过⽅法来改变实例中data对象中的数据，数据改变了，视图中的数据也改变。
三、vue的模板语法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08_vue模板语法</title>
<script src="js/vue.js"></script>
<script>
// 模板语法
//创建vue对象
var vm = new Vue({
// 1.获取标签
el:'#app',
/
/ 2.定义变量
data: {
// 2.1 可以操作⼦元素，可以放⼊短句或变量
str1: "helloworld",
桌面鼠标箭头不见了// 2.2 可以操作数值
num1: 1,
// 2.3 三元表达式: A ? B : C
gender:0,
// 2.4 属性操作
url:"www.baidu",
},
methods: {
fun1: function() {
// 操作num1
this.num1 += 1
},
fun2:function(num) {
this.num1 += num
}
},
})
selector switch翻译}
</script>
</head>
<body>
<div id="app">
<ul>
<li>vue可以操作⼦元素: {{ str1 }}</li>
<li>vue的胡⼦语法中，放⼊的是js程序(变量/短语句): {{ str1.split('').reverse().join('') }}</li> <li>{{ num1+1 }}</li>
<li>性别: {{ gender==0?"⼥":"男" }}</li>
电影源代码哪里可以看</ul>
<!-- 4.标签属性⽤到变量和⽅法，可以直接书写，不依靠胡⼦语法。 -->
<!-- 但是: 属性要特殊标注，你是vue操作的属性 -->
<!-- vue的属性操作，⼤多数都是⽤v-bind -->
<a v-bind:href="url">验证vue的属性绑定，跳转到百度</a>
<a :href="url">属性绑定简写</a>
<br><br>
<!-- 5.vue事件绑定：v-on：事件 -->
<!-- ⽅法去methods⾥⾯。 -->
<button v-on:click='fun1()'>vue事件绑定</button>
<!-- 不写函数，写逻辑 -->
<button v-on:click='num1+=2'>不执⾏函数</button>
<!-- 事件绑定，使⽤@作为简写 -->
<button @click='fun2(3)'>vue事件绑定</button>
python入门教程app</div>
</body>
</html>
四、Class绑定：事件绑定：
1. class绑定：
使⽤v-bind指令来设置元素的class属性，它们的属性值可以是表达式，vue.js在这⼀块做了增强，表达式结果除了是字符串之外，还可以是对象或者数组。
2.vue对对象的操作:
单个属性语法:
可以给v-bind:class传⼀个对象，以动态的切换class
对象值语法:
属性的值为true的值会被添加到class属性中去; 如果是false，则不会被添加
数组值语法:
案例:vue实现选项卡功能:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_class属性操作</title>
<script src="js/vue.js"></script>
<script>
/
/ vue操作class属性
var vm = new Vue({
// 1.获取标签
el:"#app",
data:{
// 2.1单个属性值
classData1:"aaa",
classData2:"bbb",
//2.2对象值：键值对
bool1:true,
bool2:false,
obj:{ // 声明⼀个对象值
'ccc':true,
'ddd':false,
}
}
})
}
</script>
</head>
<body>
<div id="app">
<!-- 1.单个值 -->
<div class="current" v-bind:class = "classData1">
class属性单个值传递
</div>
<!-- 2.对象值: 属性值为true的值会被添加到class属性中 --> <div :class="{'aaa':bool1, 'bbb':bool2}">
class属性值传递对象:⽅法1
</div>
<div :class="obj">
class属性值传递对象:⽅法2
盘腿坐的好处和坏处</div>
<!-- 3. 数组值 -->
<div :class="[classData1, classData2, obj]">
class属性值传递数组值:⽅法1
</div>
<div :class="[classData1,bool2?'active1':'active2']">
class属性值传递数组值:⽅法2
</div>
</div>
</body>
</html>
2. 案例1:vue实现选项卡功能
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论