初识vue2.0

#下载vue.js

vue.js（开发调试用）

vue.min.js（生产环境用）

#建立基本目录

#用管理员身份打开cmd

#进入到项目目录

D:\>cd D:\workspace\vue\vue-test1

#安装live-server

D:\workspace\vue\vue-test1>cnpm install -g live-server

#执行live-server运行项目

live-server

#初始化项目，生成package.json (执行1次就好)

npm init

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>HelloWord</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello word!+xwk'
            }
        })
    </script>
</body>
</html>

v-if v-else v-show

v-if：判断是否加载，可以减轻服务器的压力，在需要时加载
v-show：不管true还是false都加载，只不过是调整css display属性让其是否显示，可以使客户端操作更加流畅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if  v-else v-show指令</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-if  v-else v-show指令</h1>
    <hr>
    <div id="app">
        <!-- v-if:判断是否加载，可以减轻服务器的压力，在需要时加载 -->
        <div v-if="isLogin">欢迎，xwk</div>
        <div v-else>请登录</div>
        <!-- v-show:不管true还是false都加载，只不过是调整css display属性让其是否显示，可以使客户端操作更加流畅 -->
        <!--<div v-show="isLogin">欢迎，xwk</div>-->
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                isLogin:true
            }
        })
    </script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-for</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in sortItems">
                {{item}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(student,index) in sortStudents">
                {{index+1}}:{{student.name}}-{{student.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            // 1.先执行data
            data: {
                items:[3,6,2,7,9,1],
                students:[
                    {name:'xwk',age:28},
                    {name:'wkx',age:45},
                    {name:'kwx',age:18}
                ]
            },
            // 2.再执行computed
            computed:{
                sortItems:function () {
                    return this.items.sort(sortNum);
                },
                sortStudents:function () {
                    return sortByKey(this.students,'age');
                }
            }
        })
        // 数组排序
        function sortNum(a,b){
            return a-b
        }
        // 数组对象方法排序
        function sortByKey(array,key) {
            return array.sort(function (a,b) {
                var x=a[key];
                var y=b[key];
                return((x<y)?-1:((x>y)?1:0));
            });
        }
    </script>
</body>
</html>

v-text v-html

v-html会引起xss攻击一般不推荐使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text v-html</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-text v-html</h1>
    <hr>
    <div id="app">
        <span>{{message}}</span> = <span v-text="message"></span>
        <br/>
        <!-- v-html会引起xss -->
        <span v-html="dodo"></span>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello word!+xwk',
                dodo:'<h2>hello word!+xwk</h2>'
            }
        })
    </script>
</body>
</html>

v-on

绑定事件监听器

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-on</h1>
<hr>
<div id="app">
    本场比赛得分：{{fenshu}}
    <p>
        <button v-on:click="jiafen" >加分</button>
        <button @click="jianfen" >减分</button>
        <hr>
        <!-- 回车响应 -->
        <input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2">
    </p>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            fenshu: 0,
            fenshu2:1
        },
        methods:{
            jiafen:function () {
                this.fenshu++;
            },
            jianfen:function () {
                this.fenshu--;
            },
            onEnter:function () {
                this.fenshu=this.fenshu+parseInt(this.fenshu2);
            }
        }
    })
</script>
</body>
</html>

v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model数据源绑定</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-model数据源绑定</h1>
<hr>
<div id="app">
    <p>原始文本信息：{{message}}</p>
    <!-- 文本框 -->
    <hr>
    <h3>文本框</h3>
    <p>
        v-model：<input type="text" v-model="message">
        <!-- v-model.lazy懒加载：焦点离开时改变 -->
        v-model.lazy：<input type="text" v-model.lazy="message">
        <!-- v-model.number：只有数字才能双向绑定 -->
        v-model.number：<input type="text" v-model.number="message">
        <!-- v-model.trim：去空格 -->
        v-model.trim：<input type="text" v-model.trim="message">
    </p>
    <!-- 文本域 -->
    <hr>
    <h3>文本域</h3>
    <textarea cols="30" rows="10" v-model="message"></textarea>
    <hr>
    <h3>多选框绑定一个值</h3>
    <input type="checkbox" id="isTrue" v-model="isTrue">
    <label for="isTrue">{{isTrue}}</label>
    <!-- 多选框绑定数组 -->
    <hr>
    <h3>多选框绑定数组</h3>
    <p>
        <input type="checkbox" id="xwk" value="xwk" v-model="web_names"><label for="xwk">xwk</label>
        <input type="checkbox" id="wkx" value="wkx" v-model="web_names"><label for="wkx">wkx</label>
        <input type="checkbox" id="kwx" value="kwx" v-model="web_names"><label for="kwx">kwx</label>
    </p>
    <p>{{web_names}}</p>
    <!-- 单选框绑定 -->
    <hr>
    <h3>单选框绑定</h3>
    <p>
        <input type="radio" id="one" value="男" v-model="sex"><label for="one">男</label>
        <input type="radio" id="two" value="女" v-model="sex"><label for="two">女</label>
        <p>{{sex}}</p>
    </p>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello word!+xwk',
            isTrue:true,
            web_names:[],
            sex:'男'
        }
    })
</script>
</body>
</html>

v-bind

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-bind绑定标签属性</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-bind绑定标签属性</h1>
<hr>
<div id="app">
    <p><img v-bind:src="imgSrc" width="200px"></p>
    <p><a :href="webUrl" target="_blank">百度</a></p>
    <hr>
    <div :class="className">1.绑定class</div>
    <div :class="{classA:isOK}">2.绑定class中的判断</div>
    <hr>
    <div>
        <input type="checkbox" id="isOK" v-model="isOK"><label for="isOK">isOK={{isOK}}</label>
    </div>
    <hr>
    <div :class="[classA,classB]">3.绑定class中的数组</div>
    <hr>
    <div :class="isOK?classA:classB">4.绑定class中的三元运算符</div>
    <hr>
    <div :style="{color:redVal,fontSize:fontVal}">5.绑定style</div>
    <div :style="styleObj">5.绑定style</div>
</div>

<style>
    .classA{
        color: red;
    }
    .classB{
        font-size: 150%;
    }
</style>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586183309110&di=be1bb9ab674d98a6d65a79611251ff97&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F78%2F52%2F01200000123847134434529793168.jpg',
            webUrl:"http://www.baidu.com",
            className:"classA",
            isOK:true,
            classA:'classA',
            classB:'classB',
            redVal:'red',
            fontVal:"20px",
            styleObj:{
                color:'green',
                fontSize:'24px'
            }
        }
    })
</script>
</body>
</html>

v-pre v-cloak v-once

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-pre v-cloak v-once</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-pre v-cloak v-once</h1>
<hr>
<div id="app">
    <!-- 原样输出{{message}} -->
    <div v-pre>{{message}}</div>
    <div v-cloak>渲染完成后，才显示！</div>
    <!-- 只进行一次渲染 -->
    <div v-once>{{message}}</div>
    <div><input type="text" v-model="message"></div>
    <div>{{message}}</div>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello word!+xwk'
        }
    })
</script>
</body>
</html>

Vue2.0入门学习笔记：内部指令详解

初识vue2.0

v-if v-else v-show

v-for

v-text v-html

v-on

v-model

v-bind

v-pre v-cloak v-once

HTML页面关于高分屏的设置

北欧瑞典挪威芬兰瑞士TikTok海外网红与YouTube博主的合作模式

欧洲英国德国法国TikTok与YouTube海外网红达人的完美合作策略

druid数据源 xml配置

Vue2.0入門學習筆記：內部指令詳解

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結