Vue基本语法

二、VUE

MVVM：

Model: 模型，包括数据合并一些基本操作
View：视图
VM：View-Model，封装dom操作，每当Model改变时，View也会自动跟着改变，实现模型到视图的渲染过程

1. Vue安装

VS打开新的文件夹
在终端中初始化该项目：
```
PS D:\CCode\vue2\helloVue> npm init -y
```

在项目中安装vue：

PS D:\CCode\vue2\helloVue> npm install vue

创建html

引入vue.js

<script src="./node_modules/vue/dist/vue.js"></script>

2. Vue: 声明式渲染

创建vue示例，编写vue结构代码，关联页面元素，并将数据data响应式的渲染到关联的元素中
通过指令简化对dom的操作
在VUE中el,data和vue的作用:
- el：用来绑定数据；
- data:用来封装数据；
- methods：用来封装方法，并且能够封装多个方法，如何上面封装了cancell和hello方法。

  <body>
      <div id="app" >
          <h1>{{name}}, 你好</h1>
      </div>
  
      <script>
          let vm =new Vue({
              el: '#app',		//绑定元素
              data: {			//封装数据
                  name: '张三'
                  num: 1
              },	
              methods:{			//绑定方法
                  cancle() {
                      this.num --;
                  }
              }
          });
      </script>
  </body>

3. 双向绑定:v-model

模型变化，视图变化，视图变化，模型变化

<body>
    <div id="app" >
        <h1>{{name}}, 你好, 您点赞了{{num}}次</h1>  #num随着输入而变化

        <input type="text" v-model="num">  
    </div>
    

    <script>
        let vm =new Vue({
            el: '#app',
            data: {
                name: '张三',
                num: 1
            }
        });
    </script>
</body>
</html>

4. 事件处理：v-xx

v-xx: 指令，用于简化dom操作，关联vue封装的方法
v-on：事件绑定

 //v-on:click, 点击事件绑定
 <button v-on:click="num++">点赞</button>	  #绑定操作
 <button v-on:click="cancle">点赞</button>  #绑定方法
 <button @click.stop="cancle">点赞</button>  	  #单击事件简写
 
 //v-on:keyup.键码="事件"， 绑定按键事件

事件修饰符：

.stop: 阻止事件冒泡，两个嵌套div中，如果点击了内层的div，则外层的div也会被触发
.prevent: 阻止默认事件发生
.once: 只执行一次
.capture: 使用事件捕获模式
.self: 只有元素自身触发事件才执行

v-html: 内容绑定Vue的数据，直接显示内容，<>内元素会被浏览器解析
v-text: 内容绑定Vue的数据，但会对内容进行转义，能直接显示原始内容

<div id ="app">
    <div v-html="msg"></div>		<!--Hello-->
	<div v-text="msg"></div>		<!--<h1>Hello</h1>-->
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "<h1>Hello</h1>"
        }
    })
</script>

{{表达式}}: 插值表达式，对内容转义，显示原始内容
- 可以调用JS内置函数，支持JS语法
- 可以直接获取Vue的数据和函数
- 表达式必须有结果：例如1+1，不能是let a=1;
v-bind: 属性绑定Vue数据

<a v-bind:href="link">百度</a>

//class属性加强，根据Vue数据是true或false，动态添加class名
<div v-bind:class="{div1: isActive, 'div-2': isError}">你好</div>

//color加强
<div v-bind:style="{color: color1, 'font-size': size}">你好</div>

<script>
    new Vue({
        el:"#app",
        data:{
            isActive: true,
            isError: false,
            color1: 'red',
            size: '36px'
        }
    })
</script>

v-model: 双向绑定

单项绑定：数据变化，页面变化

双向绑定：页面元素变化，数据也变化

例如：v-model”为输入框绑定多个值，当选中改变时，在data的language也在不断变化

<body>


    <!-- 表单项，自定义组件 -->
    <div id="app">

        精通的语言：
            <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(",")}}
    </div>
    
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                language: []
            }
        })
    </script>

</body>
</html>

v-for: 绑定数据,

v-for="(item, index) in 数据", 遍历元素集合
v-for ="(value, key, index)", 遍历对象

<li v-for="user in users">
            {{user.name}} {{user.gender}} {{user.age}}
            <span v-for="(value, key, index) in user" >
                {{key}}: {{value}}
            </span>
</li>

<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: 条件为true，元素才会被渲染

v-show: 条件为true时，元素才会被显示

<h1 v-if="show">渲染我...</h1>
<h1 v-show="show">显示我...</h1>

new Vue({
	data: {
		show: true
	}
})

v-else-if: 多条件判断：

<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.25">0.25</h1>
<h1 v-else="random > 0">05</h1>

5. 计算属性:computed

动态计算Vue数据的值

<body>
    <div id="app">
        <li>价格：{{xprice}}, 数量：<input type="number" v-model="xNum"></li>
        <li>价格：{{yprice}}, 数量：<input type="number" v-model="yNum"></li>
        <li>总价：{{total}}</li>
    </div>


    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                xprice: 100,
                yprice: 50,
                xNum: 1,
                yNum: 1
            },
            computed: {
                total() {
                    return this.xprice * this.xNum + this.yprice * this.yNum;
                }
            }
        });

    </script>
</body>

6. 监控:watch

语法：数值: function(newVal, oldVal) {}

或：数值(newVal, oldVal) {}

<body>
    <div id="app">
        
        <li>数量：<input type="number" v-model="num"/></li>
        <li>{{msg}}</li>
    </div>


    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                num: 1,
                msg: ""
            },
            watch: {
                num(newVal, oldVal) {
                    if(newVal > 3) {
                        this.msg = "超出数量"
                    }else {
                        this.msg = ""
                    }
                }
            }
        });

    </script>
</body>

7. 过滤器: filters

管道+filters: 实现过滤器功能,过滤器分为两种：

局部过滤器：在Vue内部定义，只能在当前Vue示例中使用
全局过滤器：Vue.filters("filterName", function() {}), 在任何Vue示例里面都能使用

<body>
    <div id="app">
        <li v-for="user in users">
            {{user.id}}, {{user.name}}, {{user.gender | genderFilter}}
        </li>
    </div>



    <script> 
        let app = new Vue({
            el: "#app",
            data: {
                users: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            },
            filters: {
                genderFilter(val) {
                    if(val == 1) return "男";
                    else if(val ==0) return "女";
                    else return "无性别";
                }
            }
        })
    </script>
</body>

</html>

8. 组件：component

应用界面都可以抽象为一个组件树：

全局注册组件：注册的组件可以在全局使用，每个组件都是独立的

<body>
    <div id="app">
        <counter></counter>
    </div>

    <script> 
        Vue.component("counter", {
            template: `<button v-on:click="count++">点赞了{{count}}次</button>`,
            data() {
                return {
                    count: 1
                }
            }
        });
    </script>
</body>

局部组件：只能在当前Vue示例中使用

const counter2 = {
            template: `<button v-on:click="count++">点赞了{{count}}次</button>`,
            data() {
                return {
                    count: 1
                }
            }
};
let app = new Vue({
            el: "#app",
            data: {
                count: 1
            },
            components: {
                'counter2': counter2
            }
})

9. 声明周期：钩子函数

Vue声明周期：

beforeCreate: Vue创建之前，数据、方法、html模板都未加载
created: 创建并初始化，数据、方法、html模板已加载，但html模板未渲染
beforeMount: 模板渲染之前
mounted: html模板已渲染， {{}}等数据动态显示
beforeUpdate: 数据模板更新，但html模板未渲染
updated：更新模板已渲染

Vue 实例生命周期

 <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>

posted @ 2022-04-25 20:07 言思宁阅读(51) 评论(0) 收藏举报

刷新页面返回顶部

言思宁