计算机网络/计算机科学与应用/系统/运维/开发

(1)初始Vue.js

Vue.js 是什么?


简单小巧,渐进式技术栈。


MVVM 模式(Model-View-View-Model)模式,当View 视图层变化时 会自动更新到ViewModel (视图模型)


Vue.js 通过MVVM 的模式拆分为视图和数据两部分,将其分离。



<div id="app">     

        <button v-if="showBtn" v-on:click="handleClick">Click me</button> 

</div> 

<script>     

    var app = new Vue({         

            el:'#app',         

            data:{             

                    showBtn:true         

            },     

            methods:{         

                    handleClick:function(){             

                            console.log('click');        

                     }     

            }    

     }) 

</script>

<!--自动识别最新稳定版本的Vue.js-->

<script  src=”https://unpkg.com/vue/dist/vue.min.js”></script>


<!--指定某个具体的版本-->

<script src=”https://unpkg.com/vue@2.1.6/dist/vue.min.js”></script>


引入框架之后,在body底部使用new Vue()方式创建一个实例 这就是vue.js最基本的开发模式。


v-model 数据双向绑定


<div id="app">     

        <input type="text" v-model="name" placeholder="您的名字">     

        <h1>你好,{{ name }}</h1> 

</div> 

<script>     

        var app = new Vue({         

                el:'#app',         

                data:{             

                        name:''         

                }     

        }) 

</script>



创建实例 :

var app = new Vue({     el: document.getElementById('app') 或者'#app' })


除了显式声明数据外,也可以指向一个已有的变量,并且默认建立了双向绑定,修改其中一个,另一个也会变化。

var  myData={ a:1 } var app = new Vue({ el:'#app' ,data:myData })



生命周期:

Vue的生命周期也有:

created 实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不能用。

mounted  el挂载到实例上 (一般第一个业务都会在这里开始)

beforeDestroy 实例销毁之前调用  主要解绑一些使用 addEventListener监听事件等。


插值与表达式:

使用双大括号 (Mustache 语法) {{}} 是最基本的文本插值方法,会自动将我们双向绑定的数据实时显示出来

<!--{{}}胡子语法-->

<div id="app"> {{ book }}</div> <script>     var app = new Vue({         el:'#app',         data:{             book:'<vue.js>'         }     }) </script>


有时候想输出html  直接使用v-html

<div id="app">     <span v-html="link"></span> </div> <script>     var app = new Vue({         el:'#app',         data:{             link:'<a href="#">这是一个连接</a>'         }     }) </script>

link内容会被渲染为一个具有点击功能的a标签,如果将用户产生的内容使用v-html输出后,有可能导致xss攻击,所以要在服务器端对用户提交的内容进行处理,一般将尖括号<>转义


vue.js

人生于世,就得有点兴致,闲暇之时,或乐游山水、或尽享食味、或寄情岁时,它让我们的生活变得充盈。

评论

^