vue学习路径和建议—-尤雨溪vue官网根据官网一步步学习1.项目构建引入vue库，初学时直接通过CDN<!– 开发环境版本，包含了有帮助的命令行警告 –><script src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>2.声明式渲染留坑在html中创建区域（元素标签）<div id=“app”> {{ message }} <!–插值表达式–> </div>实例化在script标签中实例Vue,渲染数据var app = new Vue({ el: ‘#app’,//element,找到所渲染的坑位（div） data: { //数据 message: ‘Hello Vue!’ }})接下来官网介绍了指令v-bind从后面我了解了下v-bind的语法知识:vue单向数据流绑定 ： v-bind: (属性) 简写 :(属性)例子：<input v-bind:value=“name” v-bind:class=“name”>也可以绑定其他的属性，不仅仅是value单向数据绑定 内存改变影响页面改变v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染官网的例子简化 <div id=“app-2”> <span v-bind:title=“message”> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div>var app2 = new Vue({ el: ‘#app-2’, data: { message: ‘我就是title的内容，哈哈哈’ }})以上的 v-bind:title=“message” 可以简化为 :title=“message”.以后再细学。————–3.条件与循环这块官网讲了两个指令v-if 和 v-forv-if根据表达式的值的真假条件，销毁(remove)或重建(append)元素<div id=“app-3”> <p v-if=“seen”>现在你看到我了</p></div>var app3 = new Vue({ el: ‘#app-3’, data: { seen: true //可改为false }})将true改为 false，p标签将消失！！！v-for循环数组、对象<div id=“app-4”> <ol> <li v-for=“todo in todos”> {{ todo.text }} </li> </ol></div>var app4 = new Vue({ el: ‘#app-4’, data: { todos: [ { text: ‘学习 JavaScript’ }, { text: ‘学习 Vue’ }, { text: ‘整个牛项目’ } ] }})4.处理用户输入这块是v-on事件绑定事件绑定v-on:事件名=“表达式||函数名” 简写 @事件名=“表达式||函数名"官网的例子：添加一个可以逆转一句话的事件<div id=“app-5”> <p>{{ message }}</p> <button v-on:click=“reverseMessage”>逆转消息</button></div>var app5 = new Vue({ el: ‘#app-5’, data: { message: ‘Hello Vue.js!’ }, methods: { reverseMessage: function () { this.message = this.message.split(’’).reverse().join(’’) } }})这块是v-model 双向绑定<div id=“app-6”> <p>{{ message }}</p> <input v-model=“message”></div>var app6 = new Vue({ el: ‘#app-6’, data: { message: ‘Hello Vue!’ }})5.组建化应用构建这块准备后面再学