学习 vue 基础语法
Vue 中的组件
Vue-cli 的使用
1, 使用 Vue2.0 版本实现响应式编程
2, 理解 Vue 编程理念与直接操作 Dom 的差异
3,Vue 常用的基础语法
4, 使用 Vue 编写 TodoList 功能
5, 什么是 Vue 的组件和实例
6,Vue-cli 脚手架工具的使用
7, 但文件组件, 全局样式与局部样式
如何创建一个 Vue 实例:
直接用 < script > 引入
开发版本和生产版本
使用 cdn 的形式
- <body>
- <div id="root">hello world {{msg}}</div>
- <script>
- new Vue({
- el: '#root',
- data: {
- msg: 'hello world'
- }
- })
- </script>
- </body>
挂载点, 模板, 实例
Vue 实例的挂载点为:
<div id="root">hello world {{msg}}</div>
image.PNG
Vue 实例中的数据, 事件, 方法:
插值表达式:
- <body>
- <div id="root">
- <h1>{{number}}</h1>
- <h1 v-text="number"></h1>
- <h1 v-html="number"></h1>
- <div v-on:click="helloClick">{{content}}</div>
- <div @click="helloClick">{{content}}</div>
- </div>
- <script>
- new Vue({
- el: '#root',
- data: {
- msg: 'world',
- number: 123,
- content: 'hello'
- },
- methods: {
- helloClick: function() {
- alert(123)
- this.content = 'world'
- }
- }
- })
- </script>
- </body>
- React,Angular,Vue,Hybrid
image.PNG
属性绑定和双向数据绑定:
image.PNG
- <input v-model="content" />
- <div>
- {{content}}
- </div>
计算属性和侦听器
- <div id="root">
- <input v-model="firstName">
- <input v-model="lastName"/>
- <div> {{firstName}} {{lastName}} </div>
- <div>{{fullName}}</div>
- <div>{{count}}</div>
- </div>
- <script>
- new Vue({
- el: '#root',
- data: {
- firstName: '',
- lastName: '',
- count: 0
- },
- computed: {
- fullName: function() {
- return this.firstName + ' ' + this.lastName
- }
- },
- watch: {
- firstName: function() {
- this.count ++
- },
- lastName: function() {
- this.count ++
- },
- fullName: function() {
- this.count ++
- }
- })
- </script>
- v-if,v-show,v-for
v-show 会隐藏, 不会销毁重新创建
image.PNG
添加 Key 值可以提升效率
- <ul>
- <li v-for="item of list" :key="item">
- {{item}}
- </li>
- </ul>
- <li v-for="(item, index) of list" :key="index">
- {{item}}
- </li>
v-if 控制存在与否
v-show 控制显示与否
todoList 功能开发:
- <body>
- <div id="root">
- <div>
- <input v-model="inputValue" />
- <button @click="handleSubmit"> 提交 </button>
- </div>
- <ul>
- <li v-for="(item, index) of list" :key="index">
- {{item}}
- </li>
- </ul>
- </div>
- <script>
- new Vue({
- el: '#root',
- data: {
- inputValue: 'hello'
- list: []
- },
- methods: {
- handleSubmit: function() {
- this.list.push(this.inputValue)
- this.inputValue = ''
- }
- }
- })
- </script>
template 模板
- <ul>
- <todo-item v-for="(item, index) of list" :key="index" :content="item"></todo-item>
- </ul>
- <script>
- // 定义组件 全局组件
- Vue.component('todo-item', {
- props: ['content'],
- template: '<li>{{content}}</li>'
- })
- // 局部组件
- var TodoItem = {
- template: '<li>item</li>'
- }
- new Vue({
- el; '#root',
- components: {
- 'todo-item': TodoItem
- },
- data: {
- inputValue: '',
- list: []
- },
- </script>
image.PNG
image.PNG
组件与实例的关系:
- Vue.component('todo-item', {
- props: ['content'],
- template: '<li @click="handleClick">{{content}}</li>',
- methods: {
- handleClick: function() {
- alert('clicked')
- }
- }
- })
todolist 删除功能:
image.PNG
image.PNG
image.PNG
image.PNG
image.PNG
image.PNG
请点赞! 因为你的鼓励是我写作的最大动力!
官方微信公众号
吹逼交流群: 711613774
吹逼交流群
来源: http://www.jianshu.com/p/646cd5855c89