vue2.x入门学习

vue安装

# 最新稳定版本

$ npm install vue

# 最新稳定 CSP 兼容版本

$ npm install vue@csp

引包

cd /d/vue/demo

cnpm install vue@csp

$ ll node_modules/vue/dist/

total 1509

-rw-r--r-- 1 tanpengfei3 1049089 279 4月 27 2016 README.md

-rw-r--r-- 1 tanpengfei3 1049089 403335 9月 28 2016 vue.common.js

-rw-r--r-- 1 tanpengfei3 1049089 402783 9月 28 2016 vue.js

-rw-r--r-- 1 tanpengfei3 1049089 131766 9月 28 2016 vue.min.js

-rw-r--r-- 1 tanpengfei3 1049089 594279 9月 28 2016 vue.min.js.map

vue.min.js 压缩删减版

vue.js 完整版本

mkdir a01_v_newvue

mkdir -p static/js

cp ../node_modules/vue/dist/vue.js static/js/

index.html

<!DOCTYPE html>

<html>

<head>

    <title>引包，el，模板，data, 插值</title>

</head>

<body>

<div id="app"></div>

<script type="text/javascript" src="static/js/vue.js"></script>

<script type="text/javascript">

new Vue({

    el:"#app",

    template:`

    <div>模板显示：{{msg}}</div>

    `,

    data:function(){

        return {

            msg: '数据'

        }

    }

});

</script>

</body>

</html>

页面显示

模板显示：数据

注意事项：vue 与 Vue 是不同的

常用指令

以数据驱动dom：将经常操作dom的js方法化为一系列元素标签

v-text: 元素文本innerText，必须是双标签，将内容解析为字符串文本

v-html: 元素标签innertHTML

v-if: 判断是否插入dom，append remove，相关指令 v-else-if v-else

v-show：判断是否隐藏 display:none

v-for: 数组index,item 对象key,value，也可以是item，value

<!DOCTYPE html>

<html>

<head>

    <title>引包，el，模板，data, 插值</title>

</head>

<body>

<div id="app"></div>

<script type="text/javascript" src="static/js/vue.js"></script>

<script type="text/javascript">

new Vue({

    el:"#app",

    template:`

    <div>

        <div v-text="mytext"></div>

        <div v-html="myhtml"></div>

        <div v-if="addButton">你看到我了</div>

        <button v-if="num==11">11</button>

        <button v-else-if="num==12">12</button>

        <button v-show="cshow">v-show</button>

    <ul>

        <li v-for='item in arr_data'>

        {{item}}

        </li>

    </ul>

    <ul>

        <li v-for='(index,item) in arr_data'>

            {{index}}:{{item}}

        </li>

    </ul>

    <ul>

        <li v-for='(index,item) in arr_data'>

            {{index}}:{{item}}

        </li>

    </ul>

    <ul>

        <li v-for='(key,value) in res'>

            {{key}}:{{value}}

        </li>

    </ul>

    </div>

    `,

    data:function(){

        return {

            mytext: '<h3>文本数据</h3>',

            myhtml: '<h3>文本数据</h3>',

            addButton: false,

            num: 12,

            cshow: false,

            arr_data: ['天','地','君','亲','师'],

            res: {data:"九千九百九十九朵...",action:"送你"}

        }

    }

});

</script>

</body>

</html>

<!--使用 v-cloak能够解决插值刷新闪烁问题-->

<p v-cloak>{{msg}}</p>

单双向数据流及事件绑定

单向绑定：内存改变时，自动触发页面渲染，从而让页面随之变化；v-bind，通用元素

双向绑定：内存与页面相互影响; v-model，只作用于有value属性的元素

事件绑定：v-on:事件名="表达式||函数名" 简写 @事件名="表达式||函数名"，事件名可原生或自定义

<div id="app"></div>

<script type="text/javascript" src="static/js/vue.js"></script>

<script type="text/javascript">

new Vue({

    el:"#app",

    template:`

    <div>

        <input v-bind:value="name" :class="name"></input>

        <input type="text" v-model="name" v-bind:class="name"/>

        <button v-on:click="name='我点击了按钮'">变值</button>

        <button v-on:click="change">方法调用</button>

    </div>

    `,

    data:function(){

        return {

            name: 'input_value'

        }

    },

    methods:{

        change: function(){

            this.name = '方法 调用'

        }

    }

});

</script>

IDE

https://download-cf.jetbrains.com/webstorm/WebStorm-2019.3.1.tar.gz