Vue的学习

1.Vue是什么

　　参考Vue官网,一套用于构建用户界面的渐进式框架.

2.什么是渐进式框架

　　引用大神的话：“它给你提供足够的optional，但并不主张很多required，也不多做职责之外的事！这就是渐进式。”　

3.对比

　　传送门

4.磨刀不误砍柴工

　　参考官网案例，一步步开始.

　　1->引入vue

　　　　官方提供的cdn,直接copy到本地。目前本地项目结构。

　　　　

　　2->所有的入门都是走hello world 开始　　　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id='app'>{{hellow}}</div>
    </body>
    <script>
        var app =new Vue({
            el:'#app',
            data:
            {hellow:'Hello World'}
        })
    </script>
</html>
View Code

　　3->成功创建了第一个Vue应用

　　　　vue的判断

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id='app'><span v-if="see">data.see为true才能看见</span></div>
    </body>
    <script>
        var app =new Vue({
            el:'#app',
            data:
            {see:false}
        })
    </script>
</html>
View Code

通过console更改data里面的see

这样 我们就能看见我们想要的效果。

 

posted @ 2018-09-29 16:32  liuxbest  阅读(88)  评论(0)  编辑  收藏  举报