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