一.vue概念
# 1.什么是Vue # Vue.js是一个渐进式JavaScript框架 # 渐进式：vue从小到控制页面中的一个变量到页面一块内容到整个页面，最终大到整个项目，东可以用vue框架来实现 # vue可以干哪些事 # 将数据渲染到指定区域（数据可以是后台获取，也可以由前台自己产生） # 可以与页面完成基于数据的交互方式 # 为什么学习Vue # 1.整合了Angular React框架的优点（第一手API文档是中文的） # 2.单页面应用（得益于vue的组件化开发 => 前台代码的复用） # 3.虚拟DOM（提高操作DOM的效应） # 4.数据的双向绑定
二.如何在页面中使用vue
<body>
<div id="box1">
<!--{{ }} 会被vue解析为数据的渲染的指定语法-->
{{ }}
</div>
<hr>
<div class="box2">
{{ }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 如何使用jq框架 <= 拿到jq框架的对象 $ | jQuery
// 类比：如何使用vue框架 <= 拿到vue框架的对象 new Vue()
// vue对象需要手动创建， 原因，一个vue对象可以只控制页面中的某一部分， 如果一个页面有多个部分都需要被控制，那么就需要创建多个vue对象
// vue对象如何与控制的页面进行关联（绑定），采用的是vue对象中的挂载点(挂载点可以唯一标识页面中的某一个区域)
new Vue({
el: "#box1"
// 挂在在id为box1的div上，那么该div下的所有内容都由该vue对象来控制
})
new Vue({
el: ‘.box2‘
// 挂在在class为box2的div上，那么该div下的所有内容都由该vue对象来控制（尽量使用id，唯一标识）
})
</script>
三.vue的挂载点(vue实例)
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
// Vue实例会根据数据产生虚拟DOM,最终替换掉挂载点的真实DOM(不要挂在到body上)
var app = new Vue({
el: ‘#app‘,
data: {
msg: "今晚嘿嘿"
}
});
// 如果需要使用vue对象(实例), 那么久可以接受Vue创建的结果, 反之就不需要接收
console.log(app);
console.log(app.$attrs); // vue实例的变量都是以$开头
console.log(app.$el);
console.log(app.$data.msg);
console.log(app.msg);
// app对象 = new Vue()实例 = 标签div#app组件
</script>
四.vue基础指令
1.文本指令
<body>
<div id="app">
<p>{{ info }}</p>
<!-- v-text 为vue的文本指令 ="info" , info为vue实例data中的一个变量 -->
<p v-text="info"></p>
<p v-text="msg"></p>
<p v-html="res"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
info: "插值表达式",
msg: "文本指令",
res: "<b>加粗的文本</b>"
}
})
</script>
2.属性指令
<body>
<div id="app">
<!-- v-bind:属性 = "变量" -->
<!-- 如果abc自定义属性被v-bind:指令绑定了,后面的值也会成为vue变量, 如果就想是普通字符串, 再用‘‘包裹 -->
<!-- : 就是 v-bind: 的简写方式 (1.常用 2.一定且只操作属性)-->
<p v-bind:abc="‘abc‘" v-bind:title="h_info" :def="hehe">abc</p>
<!--最常用的两个属性 class | style-->
<!--class-->
<p :class="a"></p> <!-- 单类名 -->
<p :class="[a, b]"></p> <!-- 多类名 -->
<p :class="{c: d}"></p> <!-- 了解: c为类名,是否起作用取决于d值为true|false 开关类名 -->
<!--style-->
<p :style="s1"></p> <!-- s1为一套样式 -->
<p :style="[s1, s2, {textAlign: ta}]">12345</p><!-- 了解: s1,s2均为一套样式, ta是一个变量,专门赋值给textAlign("text-align") -->
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
h_info: "悬浮提示",
hehe: "呵呵",
a: ‘active‘,
b: ‘rule‘,
d: false,
s1: { // 样式1: 值1, ..., 样式n: 值n
width: ‘200px‘,
height: ‘200px‘,
background: ‘red‘
},
s2: {
borderRadius: ‘50%‘
},
ta: ‘center‘
}
})
</script>
3.事件指令
<body>
<div id="app">
<!-- v-on:事件 = "变量 简写 @ -->
<!-- 事件绑定的变量可以在data中赋值,但建议在methods中赋值 -->
<p v-on:click="fn1">11111111111111</p>
<p @click="fn2">22222222222222</p>
<!--vue事件的绑定可以传自定义参数-->
<p @click="fn3(333)">3333333333333333</p>
<!--vue事件的绑定不传自定义参数, 默认将事件对象传过去了-->
<p @click="fn4">4444444444444444</p>
<!--vue事件的绑定传自定义参数, 还要将事件对象传过去了, 要明确传$event-->
<p @click="fn5(555, $event)">5555555555555555</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
// 事件在data中提供一个函数地址,可以实现事件
fn1: function () {
console.log("11111111111111")
}
},
// 事件尽量(要求)都放在vue实例的methods中
methods: {
fn2: function () {
console.log("22222222222222")
},
fn3 (arg) { // ES6语法
console.log(arg)
},
fn4: function (ev) {
console.log(ev)
},
fn5: function (arg, ev) {
console.log(arg)
console.log(ev)
},
}
})
</script>
4.表单指令
<body>
<div id="app">
<!-- v-model = "变量" 本质操作的就是表单元素的value -->
<!--v-model就是完成数据的双向绑定-->
<form action="">
<input type="text" v-model="info"> <!-- info变量就是代表输入框的value -->
<input type="text" v-model="info">
</form>
<p> {{ info }} </p>
<!--v-once只会被赋值一次,就不再改变,并且要结合插值表达式使用-->
<p v-once="info">{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
// info: "初始value",
info: ""
},
})
</script>
原文地址：https://www.cnblogs.com/ye-hui/p/10376692.html
时间： 2024-08-30 18:22:40