vue入门大法1

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

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

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

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

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

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

1.声明式渲染

{{message}}

var app = new Vue({

el:‘#app’

,data:{

message:'hello vue'

}

})

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

    更好的推荐v-bind

2.条件 v-if

你可以看到我了

data:{

seen:true

}

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

3.循环 v-for

   

{{todo.text}}

    data:{

todos:[

{text:'好好学习'}

，{text:'vue'}

]

}

4.事件交互：绑定事件

+

data:{}

,methods:{

方法写到这里面哦

}

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

v-model

{{message}}

data:{

message:'HelloWord'

}

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

Vue.component('todo-item',{

template:'

这是一个代办的'

})

引用：

炫酷方法：

Vue.conponent('todo-item',{

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

,template：'

{{todo.text}}

}

引用：

data:{

groceryList:[

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

]

}

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

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

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