v-bind和v-model的本质区别和作用域

每篇一句

一场寂寞凭谁诉。算前言，总轻负。

Vue视图数据展示方式和彼此的区别:

{{插值表达式}}

• {{}}插值表达式里面 只能写表达式,不能写语句
• 文本输出,不会解析标签
• 不能作用在标签的属性上,设置属性值,只能用于标签内部用于显示数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门案例</title>
    <!--引入vue-->
    <script src="js/vue.js"></script>
</head>
<body>
<!--view视图展示数据-->
<div id="app">
    <!--{{插值表达式}}  vue显示数据方式-->
    {{message}} ======{{number+1}}===={{flag ? "真":"假"}}
</div>

</body>
<!--模型-->
<script>
    var vue = new Vue({
        el:"#app", //将id为app的区域 交给vue管理
        data:{
            message:"hello vue .....", //声明初始化模型数据
            number:18,
            flag:false
        },
        methods:{
            //所有方法
        }
    })
</script>
</html>

v-text和v-html

• v-text不会解析标签,只能解析文本
• v-html会解析标签,之后显示
• 两者只能作用域属性上,是一种属性修饰符,不能写在标签体内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text和v-html.html</title>
    <script src="../js/vuejs-2.5.16.js"></script>

</head>
<body>
<div id="app">
    插值表达式不会解析标签<br>
    {{message}}
    <hr>

    v-text:不会解析html,只能解析文本
    <div v-text="message"></div>
    <hr>
    v-html : 可以解析标签和文本
    <div v-html="message"></div>
     <hr>
	不能写在标签体内
 	<div> v-html="message"</div>

</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "<h1>Hello VUE</h1>"
        }
    });
</script>
</html>

v-bind

• 只能作用域属性上,是一种属性修饰符
• 省略写法是:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<h1 style="text-align: center">插值表达式不能作用在标签的属性上,遇到这种情况就要使用v-bing</h1>
    <font size="5" v-bind:color="ysl">坚持下去!</font>
    <font size="5" :color="ysl2">坚持下去!</font>
    <hr>
    <a v-bind={href:"http://www.baidu.com/"+info}>百度搜索java</a><br>
    <a :href="address">京东</a>
</div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            ysl:"red",
            ysl2:"green",
            info:"s?wd=java",
            address:"http://www.jd.com"
        }
    });
</script>
</html>

还有一种特殊的:v-model数据双向绑定

• 前面的都只能显示vue对象中数据, 页面数据的变化不会影响vue对象中的数据
• 而v-model绑定的数据,页面数据的改变,vue对象中的数据也会跟着改变,这非常关键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <h1>需求:使用vue赋值json数据，并显示到页面的输入框中（表单回显）。
        点击提交按钮，改变json数据，验证同时输入框的内容也发生改变。
    </h1>
    插值表达式:  {{user.username}} ,{{user.password}}  <br>
    v-model 双向绑定,输入的值会改变模型的值:<input type="text" v-model="user.username"> <br>
    v-bind 单向绑定,输入的值不会改变模型的值:<input type="text" v-bind:value="user.username"> <br>
    v-model 密码:<input type="text" v-model="user.password"> <br>
    <input type="button" @click="fun()" value="按钮(改变模型的值)"> <br>
</div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            user:{
                username:"路飞",
                password:"123456"
            }
        },
        methods:{
            fun:function () {
                alert(this.user.username+"   "+this.user.password);
                this.user.username="佐助";
                this.user.password="666666";
            }
        }
    });
</script>
</html>