vue基础之关于强制绑定

描述及特点

描述：
Vue是渐进式JavaScript框架，用于动态构建用户界面。
特点：
遵循MVVM模式，编码简介，体积小，运行效率高，适合移动/pc端开发，它本身只关注UI，可以轻松引入vue插件或其他第三方库开发项目。

引入vue的基本使用

1.引入vue.js库
2.创建Vue对象：其中el指定根element（选择器），data进行初始化数据即页面可以访问的数据操作。
3.v-model实现双向数据绑定
4.使用{ {xxx}}实现数据的显示

   <!--模板-->
    <div id="app">
        <input type="text" v-model="username">
        <div>Hello {
   {
   username}}</div>
        <p v-text="username"></p>
    </div>


    <!--引入vue.js-->
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var vue = new Vue({
    //实例化对象，配置对象 options
        //配置选项（option）
        el:'#app', //element：指定用vue来管理页面中的那个标签区域
        data:{
   
            username:'World'
        }
    })
</script>	

模板语法

理解：模板就是动态的HTML页面，包含了一些js语法代码，包括双括号表达式和以v-开头的自定义标签属性的指令。

1.双大括号表达式：{ {exp}}
双大括号表达式用于向页面输出数据，可以调用对象的方法。

<!--双大括号表达式-->
 <div id="app">
        <h1>双大括号表示</h1>
        <p>{
   {
   username}}</p>
        <p v-text="username"></p>
 </div>       
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var vue = new Vue({
   
        el:'#app',
        data:{
   
            username:'hello world',
        },
    })
</script>

2.强制数据绑定：v-bind:xxx = ‘yyy’，简写: :xxx = ‘yyy’
可以指定变化的属性值。

 <div id="app">
<h1>强制数据绑定</h1>
        <img v-bind:src<