Vue框架的学习

jasmine
215 阅读2分钟

一、Vue框架的引入和实例

引入Vue框架

Vue框架本质是js文件

- vue.js 开发环境版本，代码格式良好，命名规则，适用于研究，学习代码
- vue.min.js  生产环境版本，代码没有格式，命名不规则，不换行，阅读性差

Vue格式和实例

格式

new Vue({
  el:"#id名"     
  data:{    
      message:""    
  }
  methods:{}  
})

说明：el:Vue 实例使用的根 DOM 元素，值是id属性选择器，控制整个div对象；
data:数据键，键的值会在页面中显示；
methods：函数键，可以定义方法。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_vue入门案例</title>
</head>
<body>
    <div id="app">
        <button @click="fnClick()">按钮</button><br>
        {{message}}
    </div>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript">
        
        new Vue({
            el:"#app",
            data:{
                message:"hello world"
            },
            methods:{
                fnClick:function () {
                    alert("-------")
                }
            }
            }
        )
    </script>
</body>
</html>

注意：取出vue对象中数据的值{{键名}}

Vue的常用指令

指令名称含义
v-text数据纯文本
v-html数据可以识别标签
v-bind绑定属性，简写为一个冒号:
v-if否对HTML页面内容进行渲染
v-else是否对HTML页面内容进行渲染
v-show使用Vue的条件渲染,已经渲染，是否显示
v-for遍历
v-on事件绑定，简写为@
v-model双向数据绑定，针对的是表单项的value属性

v-text和v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_v-text指令</title>
</head>
<body>
    <div id="app">
        <!--以下两个结果一样-->
        <div>{{city}}</div>
        <div v-text="city"></div>
        <!--
        v-text   数据纯文本
        v-html   标签有效
        -->
        <div v-html="city"></div>
    </div>
    <script src="../js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                city:"<h1>深圳市</h1>"
            }
        })
    </script>
</body>
</html>

结果： v-text.jpg

v-bind绑定属性（简写为:）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-v-bind指令</title>
</head>
<body>
    <div id="app">
        <!--v-bind属性绑定    可以简化书写：-->
        <font :color="color" size="+5">文本颜色</font><br>
        <input type="text" :value="age">
    </div>

    <script src="../js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                color:"blue",
                age:30
            }
        })
    </script>
</body>
</html>

v-if和v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_Vue指令v-if和v-else</title>
</head>
<body>
    <div id="app">
        <!--Vue的v-if指令，决定是否显示-->
        <img v-if="flag" src="../img/1.jpg" width="200" height="180">
        <img v-else src="../img/2.jpg">
    </div>
    <script src="../js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                flag:true
            }
        })
    </script>
</body>
</html>

v-show指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_vue的指令v-show</title>
</head>
<body>
    <div id="app">
        <!--vue的v-show指令，决定是否显示-->
        <img v-show="flag" src="../img/1.jpg" >
    </div>
    <script src="../js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                flag:true
            }
        })
    </script>
</body>
</html>

v-for指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_vue的指令v-for</title>
</head>
<body>
    <div id="app">
        <!--
        v-for进行遍历
        v-for指令属性，元素名 in 数组
        取出数组中遍历到的元素，插值表达式
        -->
        <div v-for="fruit in fruitList">{{fruit}}</div>
        <hr/>
        <!--for指令，遍历存储对象的数组，对象名 in 数组-->
        <div v-for="employee in employeeList">
            {{employee.name}}
            {{employee.id}}
        </div>
    </div>
    <script src="../js/vue.min.js" type="text/javascript"></script>
    <script TYPE="text/javascript">
        new Vue({
            el:"#app",
            data:{
                employeeList:[
                    {name:"张三",id:1},
                    {name:"李四",id:2}
                ],
                fruitList:[
                    "香蕉",
                    "苹果",
                    "西瓜"
                ]
            }
        })
    </script>
</body>
</html>

v-on事件绑定（简写为@）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_Vue的事件</title>
</head>
<body>
<!--
            给按钮绑定点击事件: v-on:事件名="函数"
            事件绑定的简写: @事件名="函数"
            -->
        <div id="app">
            <div v-text="message"></div>

            <button type="button" @click="fn1()">按钮</button>
    </div>
    <script src="../js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            "el": "#app",
            "data": {
                "message": "Hello world"
            },
            "methods": {
                //vue的函数都是声明在methods里面的
                fn1() {
                    alert("我被点击了...")
                }
            }
        })

    </script>
</body>
</html>

事件的冒泡：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_Vue事件的冒泡</title>
</head>
<body>
    <div id="app">
        <div @click="fnOuter()" style="background: bisque;width: 300px;height: 200px">
            <!-- 阻止单击事件冒泡  <a @click.stop="doThis"></a>-->
            <div @click.stop="fnClick()" style="background: cadetblue;width: 200px;height: 120px"></div>
        </div>
    </div>
    <script src="../js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{},
            methods:{
                fnOuter:function () {
                   console.log("点击外边框")

                },
                //阻止事件的冒泡
                fnClick:function () {
                    console.log("点击内边框")


                }
            }
        })
    </script>
</body>
</html>

v-model双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_Vue数据的双向绑定</title>
</head>
<body>
    <div id="app">
        <!--Vue的指令  v-model数据模型
        文本框的数据，value属性决定
        双向绑定指一个发生改变，另一个也发生改变
        -->
        用户：<input type="text" v-model="username"><br>
        密码：<input type="text" v-model="password"><br>
        <button @click="changeText()">改变文本框实现双向绑定</button><br>
        <button @click="changeVue()">改变Vue数据实现双向绑定</button><br>


    </div>
    <script src="../js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        new Vue({
            el:"#app",
            data:{
                username:"tom",
                password:"123"
            },
            methods:{
                changeVue:function () {
                    this.username="white";
                    this.password="123456"
                },
                changeText:function () {
                    console.log(this.username+"="+this.password);

                }
            }
        })
    </script>
</body>
</html>

Vue侦听属性（watch)

在下面代码基础上，我们希望name 和age发生变化时，修改message，此时需要对name或age进行侦听，调用相应的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12_Vue的监听属性</title>
</head>
<body>
    <div id="app">
        <p>姓名：{{name}}</p>
        <p>年龄：{{age}}</p>
        姓名：<input type="text" v-model="name"/><br/>
        年龄：<input type="text" v-model="age"/><br/>
        <p>个人信息：{{message}}</p>
    </div>
    <script src="../js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                name:"张三",
                age:12,
                message:"张三 12"
            },
            "watch":{
                "name":function (newName) {
                    this.message=newName+" "+this.age;

                },
                "age":function (newAge) {
                this.message=this.name+""+newAge;

        }
            }
        })
    </script>
</body>
</html>

插值表达式

{{}}插值表达式
作用 ：从Vue对象中获取数据、简单的计算、三元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_插值表达式</title>
</head>
<body>
   
    <div id="app">
        {{studentInfo}}<br>
        {{number-1}}<br>
        {{number==10?"等于":"不等于"}}
    </div>
    <script src="../js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                message:"插值表达式",
                studentInfo:"学生开学了",
                number:"10"
            }
        });
    </script>
</body>
</html>

Vue生命周期

注意create和mounted的区别

Vue生命周期.png 深入了解推荐这两篇博客：(segmentfault.com/a/119000000…) (www.jianshu.com/p/672e967e2…)

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13_Vue的生命周期</title>
</head>
<body>
    <div id="app">
        <div id="d1">{{city}}</div>
    </div>
    <script src="../js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            "el":"#app",
            "data":{
                "city":"武汉"
            },
            //Vue的钩子函数，其实就是可以让我们在Vue的生命周期的特定阶段执行一些代码
            beforeCreate(){
                //输出数据模型city的值
                console.log("在beforeCreate钩子函数中获取city:"+this.city)
            },
            created(){
                //输出数据模型city的值
                console.log("在created钩子函数中获取city:"+this.city)
            },

            beforeMount(){
                //执行在虚拟视图替换真实视图之前,所以此时真实视图里面不会显示数据模型的数据
                console.log("在beforeMount钩子函数中获取真实视图的内容:"+document.getElementById("d1").innerHTML)
            },
            mounted(){
                //执行在虚拟视图替换真实视图之后,所以此时真实视图里面会显示数据模型的数据
                console.log("在mounted钩子函数中获取真实视图的内容:"+document.getElementById("d1").innerHTML)
            },


        })
    </script>
</body>
</html>

结果

生命周期.jpg

avatar
文章
阅读
粉丝