Vue2.X学习笔记，用于快速上手

入门案例
新建Vue简单工程
1）引入Vue.js
2）编写核心div块(View层)
3）编写Vue实例(Model层和ViewModel层)
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入门案例</title>
    <!-- 1.引入vue.js -->
    <script src="../vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2. 编写页面元素 -->
    <div id="app">
      
    </div>
</body>
    <!-- 3. 编写vue实例 -->
    <script>
        new Vue({
            el: "#app"
        })
    </script>
</html>

(2-4理论太基础了，后面会补，重要的在5之后后)

5
5.1 属性绑定
单向绑定v-bind：常用于非表单元素，如，

;
双向绑定v-model：常用于表单元素，如；
事件绑定v-on:(可以写click等事件),用于事件，可简写，如v-on:click可简写为@click

5.2 条件渲染
条件满足时，渲染到页面
主要指令：v-if 和 v-show
区别：
v-if切换开销大，v-show初始渲染开销大。相比之下，v-if是真正的条件渲染，条件为真才开始渲染，而v-show不管初始条件是什么，元素总会被渲染，并且只是简单的CSS切换(display:none);
总之，频繁切换使用v-show更好，运行时条件很少改变，使用v-if更好

5.3 条件渲染之表达式
可以==来判断，也可用事件来变换

点击事件渲染代码如下

从这里开始建议安装chrome插件Vue Devtools，可以更直观地感受到变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <!-- 1.引入vue.js -->
    <script src="../vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2. 编写页面元素 -->
    <div id="app">
        <button @click="toggle">toggle</button>
        <div v-if="flag==true">这是v-if渲染的元素</div>
        <div v-show="flag">这是v-show渲染的元素</div>
    </div>
    <!-- 3. 编写vue实例 -->
    <script>
       const vm = new Vue({
            el: "#app",
            data: {
                flag: true
            },
            methods: {
                toggle(){
                    this.flag = !this.flag
                }
            }
        })
    </script>
</body>
</html>

上述例子更为简便的方法：在button标签里不写方法名而是写上表达式，将methods去掉。

button写法如下:
<button @click=“toggle = !toggle”>toggle
5.4 列表渲染
也称循环渲染，通过v-for遍历数组或对象

1）如果不想得到下标，只想得到数据，可以用
v-for=“item in items”
2）如果数据和下标都想得到，其中item为数据，index为下标。
其中item在前，index在后
v-for="(item,index) in items"
5.5 对象渲染
与列表渲染类似

只取值
v-for=“value in obj”
取出值和对象，其中value在前，key在后
v-for="(value,key) in obj"
6. 计算属性和侦听器
6.1 计算属性
封装属性或方法，设计原则为，试图业务无关性原则：尽量将视图显示和业务处理解耦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <!-- 1.引入vue.js -->
    <script src="../vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2. 编写页面元素 -->
    <div id="app">
      输入金额：<input type="text" v-model="total">
      <p>{{ msg }}</p>
    </div>
    <!-- 3. 编写vue实例 -->
    <script>
        new Vue({
            el: "#app",
            data: {
                total: 0
            },
            computed: {
                msg() {
                    return `您本次消费${this.total}元`
                }
            }
        })
    </script>
</body>
</html>

6.2 侦听器
watch:{}
定义：侦听器用于侦听数据的改变，进而自动触发相应的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侦听器</title>
    <!-- 1.引入vue.js -->
    <script src="../vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2. 编写页面元素 -->
    <div id="app">
        单价：10元<br>
        数量：<input type="text" v-model="number"><br>
        <h3>总价：{{total}}</h3>
      
    </div>
    <!-- 3. 编写vue实例 -->
    <script>
        new Vue({
            el: "#app",
            data: {
                number: 0,
                total: 0
            },
            watch: {
                number() {
                    this.total = 10 * this.number
                }
            }
        })
    </script>
</body>
</html>

注：侦听器watch内方法名要和变量名一致

计算属性和侦听器的区别：
1）计算属性用于对原始数据的加工
2）侦听器用于侦听数据的改变，进而自动触发相应的方法

组件
1）定义全局组件
Vue.component(‘组件名’，{组件参数})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入门案例</title>
    <!-- 1.引入vue.js -->
    <script src="../vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2. 编写页面元素 -->
    <div id="app">
        <com1></com1>
        <com1></com1>
        <com1></com1>
    </div>
    <!-- 3. 编写vue实例 -->
    <script>
        Vue.component('com1',{
            template: '<button @click="count++">你点了我{{count}}次</button>',
            data() {
                return {
                    count: 0
                }
            }
        })
        new Vue({
            el: "#app"
        })
    </script>
</body>biaodashi 
</html>

其中的count数量互不影响，因为组件中的data是函数，并不会像Vue实例中那样直接提供一个data对象，取而代之的是一个组件的data是一个函数，每个实例可以维护一个被返回的独立的拷贝 -v-

2）局部组件
上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>局部组件</title>
    <!-- 1.引入vue.js -->
    <script src="../vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2. 编写页面元素 -->
    <div id="app">
        <son></son>
    </div>
    <!-- 组件模板 -->
    
    
    <!-- 3. 编写vue实例 -->
    <script>
        // 组件对象 
        
        new Vue({
            el: "#app",
            components: {
                son: {
                    template: `<button @click="count++">你点了{{count}}次</button>`,
                    data() {
                        return {
                            count: 0
                        }
                    }
                }
            }
            
        })
    </script>
</body>
</html>

这样的代码太臃肿，尤其是在拼接字符串的情况下，所以很少用，常用的方式如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>局部组件2</title>
    <!-- 1.引入vue.js -->
    <script src="../vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2. 编写页面元素 -->
    <div id="app">
        <son></son>
    </div>
    <!-- 组件模板 -->
   <template id="temp">
       <button @click="count++">你点了这个{{count}}次</button>
   </template>
    <!-- 3. 编写vue实例 -->
    <script>
        //组件对象
        const com1 ={
            template: '#temp',
            data() {
                return {
                    count: 0
                }
            }
        }
        new Vue({
            el: '#app',
            components: {
                //组件名：组件对象
                son: com1
            }
        })
    </script>
</body>
</html>

通过组件对象使用模板来减少臃肿

8.1 父组件向子组件传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父传子</title>
    <!-- 1.引入vue.js -->
    <script src="../vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2. 编写页面元素 -->
    <div id="app">
        <son :f2s="msg"></son>
    </div>
    <!-- 3. 编写vue实例 -->
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: '父->子'
            },
            components: {
                son: {
                    template: '<h3>我是子组件:{{f2s}}</h3>',
                    props: ['f2s']
                }
            }
        })
    </script>
</body>
</html>

子组件通过props向父组件(vue根组件)接收数据，通过属性绑定 :f2s=“msg” 来显示数据，msg中的数据就会传给子组件并显示。

8.2 子组件向父组件传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子传父</title>
    <!-- 1.引入vue.js -->
    <script src="../vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2. 编写页面元素 -->
    <div id="app">
        <son @send="handleSend"></son>
    </div>
    <!-- 3. 编写vue实例 -->
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                content: ''
            },
            methods: {
                handleSend(m) {
                    this.content = m
                }
            },
            components: {
                son: {
                    template: '<button @click="sendMsg">点我</button>',
                    methods: {
                        sendMsg() {
                            // 调用$emit，向父组件提供一个send事件
                            this.$emit('send','子->父')
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

子组件通过$emit提供一个send事件，send事件通过方法绑定绑定到handleSend，handleSend通过接受子组件数据传递给父组件的content，从而实现子组件像父组件传值。

posted @ 2021-07-06 00:07 TellMeYourStory 阅读(40) 评论(0) 收藏举报

刷新页面返回顶部

te11me

Vue2.X学习笔记，用于快速上手

公告