Vue.js笔记

MVVM模式

Model：负责数据存储
View：负责页面展示
View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
MVC模式：（设计模式，前后端都有模式存在）
m->model->模型->数据（JS变量）
v-view->视图->用户所见界面（HTML，CSS）
c->control->控制器->事件交互->如何根据视图与用户交互后改变数据（通过DOM对象绑定事件，将变量进行修改）

Vue.js：一套构建用户界面的渐进式框架
目标：通过尽可能简单的API实现响应的数据绑定和组合的视图组件
DOM：是数据的一种自然映射
API：应用程序接口

1、下一个编辑器，vscode

VS Code：https://code.visualstudio.com/
Hbuilder X：http://www.dcloud.io/hbuilderx.html

2、Vue.js安装

引用：https://cn.vuejs.org/v2/guide/installation.html

3、创建

最简单的一个模板！

<body>
    <div id="app">
        {{ message}}    <!--声明变量-->
    </div>

    <script type="text/javascript">
    var app = new Vue({     //全局变量vue
        el:'#app',      //元素
        data:{          //用于保存数据
            message:'hello vue 好!'
        }
    });
    </script>

</body>

代码框打‘！’
出来一个模板结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue1.js -->
    <script src="vue.js"></script>
    
</head>
<body>
    <!-- View -->
    <div id="app">
        <input type="button" value="按钮哦" v-on:click="show()" />
        <input type="button" value="按钮哦!" @click="show()" />
        <!-- 用@来代替 v-on-->
        <!-- 不传递参数时，可以省略括号 -->
        <h3>{{word}}</h3>
    </div>
    <script>
        //Module
        var m = {
            word:'hello, World! I am Vue'
        };

        //ViewModel
        var vm = new Vue({
            el:'#app',   //挂载点
            data: m,
            //方法
            methods:{
                show(){
                    console.log('hello,i am a big girl');
                    this.word = 'Changed by 啊嘞嘞';
                }
            }
        });
    </script>
</body>
</html>

右键选open in default browser（默认浏览器）,弹出页面可看效果

如何动态添加一个div，包含p标签和文字

先试一下亲手操作一次DOM
静态操作一下，原生代码写

<body>
    <div id='app'>
        <input type="button" value="按钮1">
    </div>
    <script type="text/javascript">
        //1、直接操作DOM
        function changeDirectly(){
            var app = document.getElementById('app');
            var div,p;
            div = document.createElement('div');
            p = document.createElement('p'),

            p.innerHTML = 'apple';
            div.appendChild(p);
            app.appendChild(div);
        }
        addEventListener('click',changeDirectly);
    </script>
</body>

模板方法写

</div>
    <script type="text/javascript">
        function changeDirectly(){
            var app = document.getElementById('app');
            var html = '';
            
            var htmlTmp = '<div><p>%word%</p></div>';

            html = htmlTmp.replace(/%word%/g,'apple');
            console.log(html);

            app.innerHTML = html;

        }
        addEventListener('click',changeDirectly);
    </script>

3、JS与HTML分离
第一步：把模板放到HTML中
第二步：渲染
第三步：模板hide起来

<body>
    <div id='app'>
        <input type="button" value="按钮1">
    </div>
    <script id="tmp" type="text/x-apple">
        <div>
            <p>%word%</p>
        </div>
    </script>
    <script type="text/javascript">
       
        function changeDirectly(){
            var app = document.getElementById('app');
            var html = '';
            
            var htmlTmp = document.getElementById('tmp').innerHTML;

            html = htmlTmp.replace(/%word%/g,'apple');
            console.log(html);

            app.innerHTML = html;

        }
        addEventListener('click',changeDirectly);
    </script>
</body>

条件渲染指令

v-if

**v-if**指令条件渲染指令
	它根据表达式的true/false来删除或添加元素
	语法：
		v-if="expression"
		expression是一个返回bool值
			true：显示
			false：元素删除转换为注释

<body>
    <div id='app'>
        <input type="button" value="不显示" @click="show">
        <p v-if="showP">能够被控制显示还是不显示的P标签</p>
    </div>
    <script type="text/javascript">
        var m = {
            showP:true
        }
        var vm = new Vue({
            el:'#app',
            data:m,
            methods:{
                show:function(){
                    this.showP = false;
                }
            }
        });
    </script>
</body>

<body>
    <div id='app'>
        <input type="button" value="不显示" @click="show">
        <p v-if="showP">1、能够被控制显示还是不显示的P标签</p>
        <p v-if="num1">2、如果{{num1}}是0不显示</p>
        <p v-if="num2">3、如果{{num2}}是0不显示</p>
        <p v-if="str1">4、如果{{str1}}是空字符串，不显示</p>
        <p v-if="str2.indexOf('c') > 0">5、有c，显示</p>
    </div>
    <script type="text/javascript">
        var m = {
            showP:true,
            num1:0,
            num2:5,
            str1:'',
            str2:'abc'          
        };
        var vm = new Vue({
            el:'#app',
            data:m,
            methods:{
                show:function(){
                    this.showP = false;
                }
            }
        });
    </script>
</body>

结果如下：

类似开关按钮的设置
 methods:{
                show:function(){
                    this.showP = !this.showP;
                }
            }

v-show

**v-show**指令条件渲染指令
	它根据表达式的true/false来显示或隐藏元素
	语法：
		v-show="expression"
		和v-if指令不同的是，使用v-show指令元素始终会在DOM上，通过修改style属性的显示与隐藏
			display:none true: display:block
			false: display:none
e.g. <p v-show="showP">6、能够被控制显示还是不显示的p标签</p>

v-else

v-else指令条件渲染指令
	指令必须跟一个v-if或v-show元素后
	否则不能够被识别

一个小tip：
 	//li*5
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>

<body>
    <div id='app'>
        <ul>
            <!-- 一般的循环 数组 -->
            <li v-for="val in array">{{val}}</li>
            <!-- 有下标的循环 数组 -->
            <li v-for="(val,index) in array">val = {{val}}; index = {{index}}</li> 
            <!-- 一般的循环 JSON-->
            <li v-for="val in json">{{val}}</li>
            <!-- 带有key的循环 JSON-->
            <li v-for="(val, key, index in json">val = {{val}},key = {{key}},index = {{index}}</li>
        </ul>    
    </div>   
    <script type="text/javascript">
        var m = {
            array:['Beijing', 'Jinan', 'Shanghai', 'Hangzhou', 'Sulawesi'],
            json:{
                firstCity:'Beijing',
                secondCity:'Jinan',
                thirdCity:'Shanghai',
                fourthCity:'Hangzhou',
                fivthCity:'Sulawesi'
            }
        };
        var vm = new Vue({
            el:'#app',
            data:m,
            methods:{               
            }
        });        
    </script>
</body>

运行结果：

v-model

v-model
	用于将控件与model双向绑定

<body>
    <div id="app">
        <input type='text' v-model="theValue">
        <p>{{theValue}}</p>
    </div>
    <script type="text/javascript">
        var m = {
            theValue:'hello world!'            
        };
        var vm = new Vue({
            el:'#app',
            data:m,
            methods:{
            }
        });
        </script>   
</body>

用指令实现一个留言板

1、基于Bootstrap
2、用Vue指令实现响应命令
3、实现一个输入用户名和留言的控件

首先安装bootstrap，管理员打开命令提示符

bower install jquery
bower info bootstrap
bower install bootstrap#3.4.1