根据官网一步步学习
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-for
v-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.组建化应用构建
这块准备后面再学