Vue2核心入门

本文不囊括VUE全部知识点，仅仅介绍常用到的一些知识，因此没有按照模块划分知识点，而是以功能点逐个介绍,通过下面的案例展示，更多知识参见官网https://v2.cn.vuejs.org/

冯金平案例code，本地走一遍理解
<div id="app">
    用户名：<input type="text" v-model="nickName">
    数量：<input type="button" v-model="num" @click="incre">
   <br>
    打包好的商品：
    <ul>
        <li v-for="(s,index) in shop" :key="index">
            名称：{{s.title}}
            价格：{{s.price}}
            数量：{{s.nums}}
        </li>
    </ul>
    总价：{{this.totalprice}}
    <ul >
        <li v-for="(a,i) in addrList" :key="i">
            <div :class="selectedAddr === i" @click="selectedAddr = i">
              备选收货人列表：  {{a.name}}
            </div>
        </li>
    </ul>
    <h4>你选择的收货人：{{addrList[selectedAddr].name}},收货地址：{{addrList[selectedAddr].addr}}</h4>

</div>


</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:  {

            nickName: "张三",
            shop: [
                {
                    title: "丽江的机票",
                    price: 3 ,
                    nums: 1
                },
                {
                    title: "三亚的游艇",
                    price: 2 ,
                    nums: 1
                },
                {
                    title: "滚烫的砖头",
                    price: 1 ,
                    nums: 1
                }],
            addrList: [{
                name: "fengjinping",
                phone: 10086110000,
                addr: "新疆阿里区第三党支部办公室"
            },{
                name: "Test",
                phone: 11000010086,
                addr: "生罗门群岛"
            }],
            selectedAddr: 0,
            num: 1,

        },
        methods: {
            incre(){
                this.num++;
            }
        },
        computed:{
            totalprice(){
                return this.shop.map(s=>s.price*s.nums).reduce((v1,v2)=>v1+v2,0)*this.num;
            }
        },
        watch:{
            nickName(newval,oldval){
                console.log(oldval+"变身成为："+newval)
            }
        }

    });
</script>

VUE应用的入口

vue项目入口是新定义的vue实例，Vue2的定义方式是
var app = new Vue({})
var定义的是全局变量，let定义变量当前范围局部有效，cost定义的是常量

Vue导入方式

• 官网下载:https://v2.cn.vuejs.org/v2/guide/installation.html
• 本地module导入，选择对应的vue.js文件
• cdn联网导入，需要网络环境，本文采用

动态绑定v-model

控制台修改浏览器同步变化

浏览器输入，控制台变化

点击函数@click=“函数名”

incre(){
this.num++;
}

for循环取值v-for

v-for=“(s变量,index索引) in shop数据” :key=“index”
:key=“index中，这个值必须是不可以重复的索引，不一定是当前索引，如下
v-for=”(s变量） in shop数据" :key=“s.id”

计算属性computed

去这个值的时候记得使用this.属性名，否则取不到，this，这里是当前的vue实例
{{this.totalprice}}

插值表达式 {{}}

json格式

应注意变量：（空格）值，否则undefined

watch 监听

这个值那必须被定义在data且wath方法与这个定义属性名同名，此方法第一位是新数据
watch:{
nickName(newval,oldval){操作}}
data: {
nickName: “张三” }

data

数据都需要定义在此处

el绑定

将vue实例帮顶到某个区域
el: “#app”,

es的map和reduce

都可以处理函数区别在于reduce方法定义必须，map可选，且上一个返回值将被传入这次的计算中，默认值可以不设置
二者内部都可以定义方法，