vue入门大法1

首先先说说为啥现在主流框架如此之多的今天我选择vue？

1.HTML能解决的事情不要麻烦js 这就是我干掉react的原因

2.语法简单，一句话能说清楚的不要复杂的声明一大堆，这是干掉angular的原因，东西太多记不住！！！

3.为什么不选择其他，因为资源太少，开发遇到坑，真的就是坑，需要自己踩过，之前踩过areTeamlert(没记住也不想查了，但是总而言之，感受很差！！！）

4.小程序也用了这部分思想，只是不是双向绑定！这个用起来更爽！

新手教程 就直接简单粗暴的在原文HTML中引入VUE这样的方式来更快的了解VUE

1.声明式渲染

<div id='app'>{{message}}</div>

var app = new Vue({

el:‘#app’

,data:{

message:'hello vue'

}

})

    这样写的好处，更有利于前后端分离呀，不用让后台大叔改前端代码了！不知道你遇到过给你改的面目全非还要你背锅的PHP！！

    更好的推荐v-bind

2.条件 v-if

<p v-if='seen'>你可以看到我了</p>

data:{

seen:true

}

可以在外面通过app.seen = false 更改里面的值哦 蛮重要的！！！可以以后会用到

3.循环 v-for

   <li v-for = "todo in todos">{{todo.text}}</li>

    data:{

todos:[

{text:'好好学习'}

，{text:'vue'}

]

}

4.事件交互：绑定事件

<button on:click='add'>+<button>

data:{}

,methods:{

方法写到这里面哦

}

5.双向绑定！！！来咯！！

v-model

<p>{{message}}</p>

<input v-model='message'>

data:{

message:'HelloWord'

}

6.组件化：我的弱点！！！！！！！！以前开发没看懂，最近接触了vue 就好多了

Vue.component('todo-item',{

template:'<li>这是一个代办的</li'>'

})

引用：<ol><todo-item></todo-item></ol>

炫酷方法：

Vue.conponent('todo-item',{

props:['todo']  //todo-item 组件现在接受一个‘prop’，类似于自定义属性命名为todo

,template：'<li>{{todo.text}}</li>

}

引用：

<todo-item v-for='item in groceryList' v-bind:todo='item' v-bind:key:'item.id'></todo-item>

data:{

groceryList:[

{id:0,text:'蔬菜'}

]

}

——————————————————————————开发中遇到的实际问题-------------------------------------------------------------------------

1.在循环中 出现了三种不一样选择

解决方案：v-if 根绝里面的数据来判断

<template v-for='i in select'>
        <div class="letter a" v-if=' "a" == i.letter' v-on:click='selectStundet(i)' :class='i.on ? "on" :"" '><p>{{i.name}}</p></div>
        <div class="letter b" v-if=' "b" == i.letter' v-on:click='selectStundet(i)' :class='i.on ? "on" :"" '><p>{{i.name}}</p></div>
        <div class="letter c" v-if=' "c" == i.letter' v-on:click='selectStundet(i)' :class='i.on ? "on" :"" '><p>{{i.name}}</p></div>
        <div class="letter d" v-if=' "d" == i.letter' v-on:click='selectStundet(i)' :class='i.on ? "on" :"" '><p>{{i.name}}</p></div>
    </template>