Vue基础
渐进式JavaScript框架
通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目
什么是Vue
可以独立完成前后端分离web项目的Javascript框架
有什么特点
单页面web应用
数据驱动
数据的双向判定
虚拟DOM
Vue的挂载点
new Vue({
el: '#app',
})
el为挂载点，才有css3选择器语法与页面标签进行绑定，决定该vue对象控制的页面范围
1.挂载点只检索页面中第一个匹配到的结果，所以挂载点一般都才有id选择器
2.html与body标签不可以作为挂载点（组件中解释）
Vue过滤器
<div id="app">
<!-- 默认将msg作为参数传给filterFn -->
<p>{{ msg | filterFn }}</p>
<!--过滤器串联-->
<p>{{ num | f1 | f2 }}</p>
<!--可以同时对多个变量进行过滤，变量用，分割，过滤器还可以额外传入参数辅助过滤-->
<!--过滤器方法接收所有传入的参数，按传入的位置进行接收-->
<p>{{ msg, num | f3(950, '好的') }}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '文本内容',
num: 1
},
filters: {
filterFn(v1, v2) {
// console.log(v1);
// console.log(v2);
return `<b>${v1}</b>`;
},
f1(v1) {
return v1 * 100;
},
f2(v1) {
return v1 * 100;
},
f3(v1, v2, v3, v4) {
console.log(v1);
console.log(v2);
console.log(v3);
console.log(v4);
}
}
})
Vue指令
文本指令
<div id="app">
1、插值表达式，能完成变量渲染，变量基础运算，变量方法调用，不能完成复杂运算(一步解决不了的，不能出现；)
<p>{{ msg }}</p>
<p>{{ msg + '拼接内容' }}</p>
<p>{{ msg[1] }}</p>
<p>{{ msg.slice(2, 4) }}</p>
2、v-text：将所有内容做文本渲染
<p v-text="msg + '拼接内容'"></p>
3、v-html：可以解析html语法标签的文本
<p v-html="'<b>' + msg + '</b>'"></p>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '文本信息'
}
})
事件指令
事件指令：v-on:事件名="事件函数"
<p v-on:click="f1">被点击了{{ count }}下</p>
简写：@事件名="事件函数"
<p @click="f1">{{ count }}</p>
绑定的事件函数可以添加()，添加括号就代表要传递参数
<ul>
<li @click="f3(100)">{{ arr[0] }}</li>
<li @click="f3(200)">{{ arr[1] }}</li>
<li @click="f3(300)">{{ arr[2] }}</li>
</ul>
绑定的事件函数如果没有传递参数，默认传入 事件对象
注意：事件函数一旦添加传参()，系统就不再传递任何参数，需要事件对象时，可以手动传入 $event
属性指令
1.属性指令：v-bind:属性名="变量"，简写方式 :属性名="变量"
<div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
2.属性指令操作 style 属性
<div style=" 200px;height: 200px;background-color: greenyellow"></div>
通常：变量值为字典
<div :style="mys1"></div>
了解：{中可以用多个变量控制多个属性细节}
<div :style="{ w,height: '200px',backgroundColor: 'deeppink'}"></div>