【项目笔记】VUE复习-CSDN博客

本文链接：https://blog.csdn.net/z591593455/article/details/107931257

【项目笔记】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">
    看到我啦？！ &gt;= 0.75
</h1>

<h1 v-else-if="random>=0.5">
    看到我啦？！ &gt;= 0.5
</h1>

<h1 v-else-if="random>=0.2">
    看到我啦？！ &gt;= 0.2
</h1>

<h1 v-else>
    看到我啦？！ &lt; 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