Vue2.x基础
一、 Vue 快速入门
1、什么是 Vue ?
① 官方对于 Vue 描述： Vue是一套用于构建用户界面的渐进式 框架。与其它大型框架不同的是， Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整 合。另一方面，当与现代化的工具链以及各种支持类库结合使用时， Vue 也完 全能够为复杂的单页应用提供驱动。
② 解析官方描述：官方对于 Vue 描述，包含了大量专业术语
-
构建用户界面：开发 网页视图 的技术
-
渐进式框架：支持单个网页的开发，也支持复杂项目的开发， 同时支持不 同复杂度和难度项目 的开发
-
自底向上 逐层 应用：开发过程中对数据声明存储、数据运算、数据渲染 层次支持非常友好
-
核心库只关注视图层：前端开发中的重点是优化网页视图页面
-
剩下的所有内容：描述了 Vue 很强大，很容易学习，很容易掌握，很容易 用于项目实践
③ 结论：什么是 Vue ？
Vue，是一个用于快捷、高效开发前端应 用的渐进式框架！
2、引入 Vue 支持
① 下载 Vue 框架
本质上就是下载对应的 .js 文件，包含开发版本、生产版本
② 项目中引入
简单前端项目，本质上就是一个 html 网页，网页中直接通过 script 标签进 行引入
<script src="./vue.js"></script>
3、第一个入门应用
<div id="app">
<!-- 4.id="app"的div中，可以直接使用Vue实例的数据 -->
<h2>msg1: {{ message }} </h2>
</div>
<div>
<!-- 5.注意：message变量中数据的访问，不能超出id=app的div范围-->
<h2>msg2: {{ message }}</h2>
</div>
<script src="./vue.js"></script>
<script>
// 1.创建一个Vue实例
const app = new Vue({
// 2.el(element缩写)：将实例挂载到id=app的div上
el: "#app",
// 3.data：声明使用的数据
data: {
message: "hello vue!"
}
})
</script>结论：以前通过原生 JS 开发网页，操作标签中的数据需要通过 DOM 进行处 理； Vue 中提供了特殊语法可以直接在页面中使用变量的数据，简化/省略了对应 DOM 操作，提高了页面的加载性能！
| 选项名称 | 选项描述 |
|---|---|
el | 将 Vue 实例挂载到网页中的某个标签 |
data | 声明实例中/对应网页标签内部，声明要使用的数据 |
methods | 声明实例中/对应网页标签内部，使用的 各种函数 |
watch | 声明实例中/对应网页标签内部，使用的 侦听器函数 |
computed | 声明实例中/对应网页标签内部，使用的 计算属性函数 |
filters | 声明实例中/对应网页标签内部，使用的 过滤器函数 |
components | 声明实例中/对应网页标签内部，使用的 局部组件 |
mounted() | 声明实例中/对应网页标签内部，使用的生命周期函数 |
created() | 声明实例中/对应网页标签内部，使用的生命周期函数 |
| ... | ... |
4、插值表达式
代码演示：
<div id="app">
<h3>插值表达式输出数据</h3>
<p>直接输出数据：{{ message }}</p>
<p>字符串拼接(简单运算)：{{ message + ":" + version}}</p>
<p>数据拼接(隐式转换)：{{ times + "周"}}</p>
<p>数据运算：{{ (times - 1) + "周" }}</p>
<p>内部函数：{{ times.toFixed(2) }}</p>
<p>自定义函数：{{ strReverse(message) }}</p>
<p>三元运算符：{{ times >= 2 ? '学习周期': '项目周期' }}</p>
</div>
<script src="./vue.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
// 声明在实例中的数据
message: '跟DAMU学Vue',
version: 'V2.17.0',
times: 2
},
methods: {
// 声明自定义函数
strReverse(str) {
return str.split('').reverse().join('');
}
}
})
</script>-
了解插值表达式的各种使用语法
-
掌握：插值表达式可以直接渲染输出变量中的数据
-
原因：数据的运算尽量放在函数中去执行，插值表达式做最终 的数据渲染展示即可！
-
5、内置指令
（1） v-text/v-html
-
v-text ：用于渲染普通文本数据
-
v-html ：用于渲染富文本数据
（2） v-once
-
作用：网页中一次性加载数据，一般配合其他指令一起使用，再修改数据时，不会发生改变
（3） v-show
-
作用：条件渲染指令，按照给定的条件通过控制 display:none|block 样式， 让数据显示/隐藏进行切换
（4） v-if
作用：条件渲染指令，功能上支持多分支语法;
-
注意： v-if 指令通过 DOM加载/卸载 控制一个数据在页面上显示/隐藏
（5） v-for
作用：一种循环指令，用于数组/集合数据的循环，称为列表渲染指令
-
可以单独循环遍历数据： v-for="name in jobs"
-
循环遍历索引和数据： v-for="(name, index) in jobs"
-
给 key 属性绑定循环状态： v-for="(name, index) in jobs" vbind:key="name
（6） v-bind
作用：给标签属性，动态设置数据
-
注意：包含一个简洁语法， v-bind:src="" -> :src=""
（7） v-on
作用：给标签添加事件
-
注意：包含一个简洁语法， v-on:click="..." -> @click="..."
（8） v-model
作用：提供给表单数据双向绑定的指令
-
v-model 不仅可以用于文本输入框，其他表单标签 密码输入框/单选框/复选 框/下拉框... 都可以使用
代码操作：
<div id="app">
<div>v-text <span v-text="message"></span></div>
<div>v-html <span v-html="message"></span></div>
<div>v-once <span v-html="message" v-once></span></div>
<hr>
<div>v-show指令： <span v-show="isLogin">小心点</span></div>
<div>v-if指令： <span v-if="isLogin">小心点</span>
<span v-else="isLogin">大意了</span>
</div>
<!-- <div>v-show指令： <span v-if="grade">优秀</span></div> -->
<div>v-for指令：<br>
<span v-for="name in jobs">{{ name }} = </span><br>
<span v-for="(name,index) in jobs">{{ index+":"+name }} = </span><br>
<span v-for="(name,index) in jobs" v-bind:key="index">{{ name }}</span>
</div>
<div>
v-bind指令：
<img v-bind:src="img1" alt="">
<img :src="img1" alt="">
</div>
<div>
v-on
<button v-on:click="handler1">按钮1</button>
<button @click="handler2">按钮1</button>
</div>
<div>
v-model指令:
<p>账号：<input type="text" v-model="username"></p>
<p>输入数据 <strong>{{username}}</strong></p>
</div>
</div>
<script src="../js/vue/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
username:'',
isLogin: false,
message: "<strong>今朝剑指叠云处，炼蛊炼人还炼天</strong>",
img1: '../src/img/jfm.png',
jobs: [
"需求工程师",
'研发工程师',
'运维工程师',
'操作工程师'
]
},
methods:{
handler1(){
console.log("用户点击了")
},
handler2() {
console.log("用户2点击了")
}
}
})
</script>6、样式操作
（1） class 样式
① 样式提前设置好的
<style>
.inverse-bg {
background-color: #333;
color: white;
}
.bg {
background: aliceblue;
}
.fred {
color: orangered;
}
</style>② 代码中通过变量控制样式
<body>
<div id="app">
<h2>class样式设置</h2>
<p :class="{'inverse-bg': isReverse}">class对象语法设置样式【重点】</p>
<p :class="['bg', 'fred']">class 数组方式设置样式</p>
<p class="bg fred">class 普通语法样式</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isReverse: false, // 是否显示反色样式
}
})
</script>
</body>（2） style 样式
<div id="app">
<h2>style样式设置</h2>
<p :style="{fontSize:fsize, backgroundColor: bg}">style样式对象语法设置</p>
<p :style="[reverse, fontSize]">style 数组格式设置样式</p>
<p :style="isBg?reverse:''">style三元表达式</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isReverse: false, // 是否显示反色样式
fsize: '12px',
bg: 'red',
isBg: true, // 是否显示背景颜色
reverse: {
backgroundColor: 'orangered',
color: 'white'
},
fontSize: {
fontSize: '22px'
}
}
})
</script>
扫一扫
1215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
