【项目笔记】VUE复习
MVVM思想
MVVM的全名是Model-View-ViewModel，它的基本思路就是这样：
M：即Model，模型，包括数据和一些基本操作
V：即View，试图，页面渲染结果
VM：即View-Model，模型与视图间的双向操作
Vue简介
入门案例
<div id="app">
<input type="text" v-model="num">
<button v-on:click="num++">点赞</button>
<button v-on:click="cancle">取消</button>
<h1> {{name}} ,非常帅，有{{num}}个人为他点赞{{hello()}}</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
//1、vue声明式渲染
let vm = new Vue({
el: "#app",//绑定元素
data: { //封装数据
name: "张三",
num: 1
},
methods:{ //封装方法
cancle(){
this.num -- ;
},
hello(){
return "1"
}
}
});
//2、双向绑定,模型变化，视图变化。反之亦然。
//3、事件处理
//v-xx：指令
//1、创建vue实例，关联页面的模板，将自己的数据(data)渲染到关联的模板，响应式的
//2、指令来简化对dom的一些操作。
//3、声明方法来做更复杂的操作。methods里面可以封装方法。
</script>指令
v-text= v-html=
<span v-html="msg"></span>
<br/>
<span v-text="msg"></span>
data:{
msg:"<h1>Hello</h1>",
link:"http://www.baidu.com"
},v-bind： 给任意属性绑定值 或者前面加 :
<a :href="link">gogogo</a>
<!-- class,style {class名：加上？}-->
<span v-bind:class="{active:isActive,'text-danger':hasError}"
:style="{color: color1,fontSize: size}">你好</span>
data:{
link: "http://www.baidu.com",
isActive:true,
hasError:true,
color1:'red',
size:'36px'
}v-model=
在未来开发中，使用这个较多
精通的语言：
<input type="checkbox" v-model="language" value="Java"> java<br/>
<input type="checkbox" v-model="language" value="PHP"> PHP<br/>
<input type="checkbox" v-model="language" value="Python"> Python<br/>
选中了 {{language.join(",")}}
data:{
language: []
}v-on： 绑定事件 或者直接写@
<!--事件中直接写js片段-->
<button v-on:click="num++">点赞</button>
<!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
<button @click="cancle">取消</button>
<!-- -->
<h1>有{{num}}个赞</h1>
<!-- 事件修饰符 -->
<div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
大div
<div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
小div <br />
<a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
</div>
</div>
<!-- 按键修饰符： -->
<input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br />
提示：
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
num: 1
},
methods:{
cancle(){
this.num--;
},
hello(){
alert("点击了")
}
}
})
</script>阻止事件
.stop 阻止事件冒泡到父元素
.prevent 阻止默认事件发生
.capture 使用事件捕获模式
.self 只有元素自身触发事件才 执行。(冒泡或捕获的都不执行 )
.once 只执行一-次
按键修饰符
.ctrl => //Ctrl键
.enter => // enter键
.tab => // tab键
.delete (捕获“删除”和“退格”按键) => // 删除键
.esc => // 取消键 .space => // 空格键
.up => // 上
.down => // 下
.left => // 左
.right => // 右
v-for=
<div id="app">
<ul>
<li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'">
<!-- 1、显示user信息：v-for="item in items" -->
当前索引：{{index}} ==> {{user.name}} ==> {{user.gender}} ==>{{user.age}} <br>
<!-- 2、获取数组下标：v-for="(item,index) in items" -->
<!-- 3、遍历对象：
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
-->
对象信息：
<span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}}；</span>
<!-- 4、遍历的时候都加上:key来区分不同数据，提高vue渲染效率 -->
</li>
</ul>
<ul>
<li v-for="(num,index) in nums" :key="index"></li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
users: [{ name: '柳岩', gender: '女', age: 21 },
{ name: '张三', gender: '男', age: 18 },
{ name: '范冰冰', gender: '女', age: 24 },
{ name: '刘亦菲', gender: '女', age: 18 },
{ name: '古力娜扎', gender: '女', age: 25 }],
nums: [1,2,3,4,4]
},
})
</script>v-if和v-show
v-else和v-else-if
<!--
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
v-show，当得到结果为true时，所在的元素才会被显示。
-->
<button v-on:click="show = !show">点我呀</button>
<!-- 1、使用v-if显示 -->
<h1 v-if="show">if=看到我....</h1>
<!-- 2、使用v-show显示 -->
<h1 v-show="show">show=看到我</h1>
<button v-on:click="random=Math.random()">点我呀</button>
<span>{{random}}</span>
<h1 v-if="random>=0.75">
看到我啦？！ >= 0.75
</h1>
<h1 v-else-if="random>=0.5">
看到我啦？！ >= 0.5
</h1>
<h1 v-else-if="random>=0.2">
看到我啦？！ >= 0.2
</h1>
<h1 v-else>
看到我啦？！ < 0.2
</h1>计算属性和侦听器
计算属性 是指一个可以计算的属性(这不是废话吗
~)
//计算属性可以写到computed里面
computed: {
totalPrice() {
return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum
}
},
//监听器
watch: {
xyjNum(newVal, oldVal) {
if (newVal >= 3) {
this.msg = "库存超出限制";
this.xyjNum = 3
} else {
this.msg = "";
}
}
},过滤器
{{user.gender | genderFilter}} ==> {{user.gender | gFilter}}// `|` 表示管道符
//全局过滤器
Vue.filter("gFilter", function (val) {
if (val == 1) {
return "男~~~";
} else {
return "女~~~";
}
})
filters: {
filters 定义局部过滤器，只可以在当前vue实例中使用
genderFilter(val) {
if (val == 1) {
return "男";
} else {
return "女";
}
}
}组件化
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。在vue里面，所有的vue实例都是组件
//用的时候就直接这么用
<counter></counter>
<counter></counter>
<counter></counter>
<counter></counter>
<counter></counter>
//1、全局声明注册一个组件
Vue.component("counter", {
template: `<button v-on:click="count++">我被点击了 {{count}} 次</button>`,
data() {
return {
count: 1
}
}
});
//2、局部声明一个组件
const buttonCounter = {
template: `<button v-on:click="count++">我被点击了 {{count}} 次~~~</button>`,
data() {
return {
count: 1
}
}
};生命周期和钩子函数
生命周期
<div id="app">
<span id="num">{{num}}</span>
<button @click="num++">赞！</button>
<h2>{{name}}，有{{num}}个人点赞</h2>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
name: "张三",
num: 100
},
methods: {
show() {
return this.name;
},
add() {
this.num++;
}
},
beforeCreate() {
console.log("=========beforeCreate=============");
console.log("数据模型未加载：" + this.name, this.num);
console.log("方法未加载：" + this.show());
console.log("html模板未加载：" + document.getElementById("num"));
},
created: function () {
console.log("=========created=============");
console.log("数据模型已加载：" + this.name, this.num);
console.log("方法已加载：" + this.show());
console.log("html模板已加载：" + document.getElementById("num"));
console.log("html模板未渲染：" + document.getElementById("num").innerText);
},
beforeMount() {
console.log("=========beforeMount=============");
console.log("html模板未渲染：" + document.getElementById("num").innerText);
},
mounted() {
console.log("=========mounted=============");
console.log("html模板已渲染：" + document.getElementById("num").innerText);
},
beforeUpdate() {
console.log("=========beforeUpdate=============");
console.log("数据模型已更新：" + this.num);
console.log("html模板未更新：" + document.getElementById("num").innerText);
},
updated() {
console.log("=========updated=============");
console.log("数据模型已更新：" + this.num);
console.log("html模板已更新：" + document.getElementById("num").innerText);
}
});
</script>钩子函数
vue模块化开发
1、npm install webpack -g
全局安装webpack
2、npm install -g @vue/cli-init
全局安装vue脚手架
3、初始化vue项目;
vue init webpack appname: vue 脚手架使用webpack模板初始化一个 appname项目
4、启动vue项目;
项目的package.json中有scripts, 代表我们能运行的命令
npm start = npm run dev: 启动项目
//文件目录结构
//build 跟打包相关目录
//config 配置信息，一般配置一些端口之类的，然后区分不同的环境
//node_modules 用npm安装的所有项目依赖
//src 编写代码的文件夹
//assets
//components
//router 路由配置
//main.js 主程序
//static 静态资源文件
//.babelrc 语法转义
//package.json 需要的依赖 类似于maven的pom
2643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
