vue 官网：https://cn.vuejs.org/
vue 官方文档：https://cn.vuejs.org/v2/guide/
1、vue 下载：
https://cn.vuejs.org/v2/guide/installation.html
开发版本 包含完整的警告和调试模式
生产版本 删除了警告，33.46KB min+gzip
CDN：
对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
</script>
2、vue 实例
2.1 在 html 文件中引入 vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
2.2 创建一个 vue 实例
<script type="text/javascript">
var vm = new Vue({
el : "#app", // 绑定元素的 id
data : { // 数据对象中的属性，现在里面有个 message 的属性，初始值为 vue
message:"vue"
}
})
</script>
2.3 将数据绑定到页面元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app", // 绑定元素的 id
data : { // 数据对象中的属性，现在里面有个 message 的属性，初始值为 vue
message:"vue"
}
})
</script>
</body>
</html>
页面展示效果：
在控制台输入 vm.message = "hello Vue" ，浏览器显示内容会变成控制台输入的内容，我们没有主动操作DOM， 就使页面的内容发生了变化， 借助了Vue的数据绑定功能实现的； MV VM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑定， 以做到数据与视图的快速响应。
3、vue 模板语法
3.1 插值
-
文本：使用双大括号
{{}}进行插值<span>Message: {{ msg }}</span> -
HTML：使用
v-html插入 HTML<span v-html="rawHtml"></span> -
Attribute：使用
v-bind指令绑定元素特性<div v-bind:id="dynamicId"></div> -
使用 JavaScript 表达式
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div>
3.2 指令
-
v-bind绑定元素特性<span v-bind:title="message"> -
v-on监听 DOM 事件，触发时运行一些 JavaScript 代码<a v-on:click="doSomething">...</a>
3.3 缩写
-
v-bind缩写<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> -
v-on缩写<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a>
3.4 条件渲染
-
v-if指令的表达式返回 true 值的时候被渲染，可以配合v-elsev-else-if使用<h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1> -
v-show根据条件展示元素<h1 v-show="ok">Hello!</h1>
3.5 列表渲染
-
v-for="item in items"基于一个数组来渲染一个列表 items 是源数据数组，item 是数组元素的别名<ul id="example-1"> <li v-for="item in items" :key="item.message"> {{ item.message }} </li> </ul> <script> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) </script>v-for支持第二个可选参数，当前项的索引<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>也可以用 of 代替 in 作为分隔符
<div v-for="item of items"></div>遍历对象
<div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div> <script> new Vue({ el: '#v-for-object', data: { object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } }) </script>
3.6 表单双向绑定
-
用
v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定v-model会忽略所有表单元素的value、checked、selectedattribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的data选项中声明初始值。文本
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>多行文本（在文本区域插值 (
<textarea>{{text}}</textarea>) 并不会生效）<span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea>单选框
<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label>复选框
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> <script type="text/javascript"> new Vue({ el: '...', data: { checkedNames: [] } }) </script>单选按钮
<div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> <script type="text/javascript"> new Vue({ el: '#example-4', data: { picked: '' } }) </script>下拉框
<div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> <script type="text/javascript"> new Vue({ el: '...', data: { selected: '' } }) </script>
3.7 计算属性
-
computed计算属性可以完成各种复杂的逻辑，包括运算、函数调用等，最后返回一个结果即可<div id="app"> <div> {{message}} </div> <div> {{newMessage}} </div> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ message:"hello" }, computed:{ newMessage(){ this.message; // 观察到 message 数据变化而变化 console.log(new Date()); return this.message.split('').reverse().join(''); } } }) </script>methods 中的方法名不能与 computed 中的计算属性重名。
3.8 内容分发
-
使用
<slot>插槽作为分发内容的入口，将组件组合起来进行使用<div id="app"> <todo> <todo-title slot="todo-title" title="title"></todo-title> <todo-items slot="todo-items" v-for="item,index in todoItems" :item="item,index"></todo-items> </todo> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script type="text/javascript"> Vue.component('todo',{ template:'<div>\ <slot name="todo-title"></slot>\ <ul>\ <slot name="todo-items"></slot>\ </ul>\ </div>' }); Vue.component('todo-title',{ props:['title'], template:'<div>{{title}}</div>' }); Vue.component("todo-items",{ props:["item","index"], template:"<li>{{index+1}},{{item}}</li>" }); var vm = new Vue({ el:"#app", data:{ title:"标题", todoItems:['item1','item2','item3'] } }); </script>
3.9 自定义事件
-
数据项在 new 的 vue 实例中，组件中无法进行删除操作，vue 提供了
this.$emit('自定义事件', 参数)进行参数传递和事件分发在 vue 实例中添加删除方法
var vm = new Vue({ el:"#app", data:{ title_text:"标题", todoItems:['item1','item2','item3'] }, methods:{ removeItems:function(index){ this.todoItems.splice(index,1); } } });增加删除按钮并绑定事件
Vue.component("todo-items",{ props:["item","index"], template:"<li>{{index + 1}},{{item}} <button @click='remove'>删除</button></li>", methods:{ remove:function (index) { // 自定义事件名称，使用 $emit 自定义事件分发 this.$emit('remove',index); } } }); <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item, item" v-on:remove="removeItems(index)" :key="index"></todo-items>
4、组件
4.1 组件基础
-
vue 组件示例（组件是可复用的 Vue 实例，且带有一个名字。一个组件的
data选项必须是一个函数，维护一份被返回对象的独立的拷贝）Vue.component()：注册组件
button-counter：组件的名字
template：组件的模板
// 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' })我们可以在一个新的 new Vue 实例中把组件作为自定义元素使用
<div id="components-demo"> <button-counter></button-counter> </div> <script> new Vue({ el: '#components-demo' }) </script> -
组件复用（以将组件进行任意次数的复用）
<div id="components-demo"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div> -
通过 prop 向子组件传递数据（我们需要传递参数到组件）
prop
<script> Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}</h3>' }) </script> <!--一个 prop 被注册之后，你就可以像这样把数据作为一个自定义 attribute 传递进来 --> <blog-post title="My journey with Vue"></blog-post> <blog-post title="Blogging with Vue"></blog-post> <blog-post title="Why Vue is so fun"></blog-post> -
单个根元素
<script> Vue.component('button-counter', { props:['title', 'content'], template: '<h3>{{title}}</h3> <div>content的值为：{{content}}</div>' }) </script>如果模板这样写，vue 会报错
Component template should contain exactly one root element每个组件必须只有一个根元素，我们需要将模板内容包裹在一个父元素内解决这个问题<script>Vue.component('button-counter', { props:['title', 'content'], template: '<div>' + '<h3>{{ title }}</h3>' + '<div v-html="content"></div>' + '</div>' }) </script>
4.2 深入了解组件
-
组件注册
-
组件名（Vue.component 的第一个参数）
Vue.component('my-component-name', { /* ... */ })组件名命名规则：字母全小写且必须包含一个连字符
-
全局注册（注册后可以在任何新创建的 Vue 实例中）
Vue.component('my-component-name', { // ... 选项 ... }) -
局部注册（局部注册的组件在其子组件中不可用）
// 通过一个普通的 JavaScript 对象来定义组件 var ComponentA = { /* ... */ } var ComponentB = { /* ... */ } var ComponentC = { /* ... */ } // 在 components 中选择要使用的组件 new Vue({ el: '#app', components: { 'component-a': ComponentA, 'component-b': ComponentB } })
-
-
Prop
-
Prop 类型
字符串数组形式
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']名称 ：类型
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor } -
传递静态或动态 Prop
静态传值
<blog-post title="My journey with Vue"></blog-post>使用
v-bind动态赋值<!-- 动态赋予一个变量的值 --> <blog-post v-bind:title="post.title"></blog-post> <!-- 动态赋予一个复杂表达式的值 --> <blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post> -
Prop 验证
Vue.component('my-component', { props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } } })
-
5、Axios 异步通信
5.1 什么是 Axios
Axios 文档：http://www.axios-js.com/
Axios 是个开源的可以在浏览器端和 node js 使用的异步通信框架，主要作用就是实现 AJAX 异步通信
重点是 vue-resoure 不更新维护，vue团队建议使用axios
5.2 Axios 特点
- 自动转换 JSON 数据
- 拦截请求和响应
- 转换请求数据和相应数据
- 从 浏览器中创建 XMLHttpRequests，从 node.js 创建 HTTP 请求
- …
5.3 Axios 使用
-
Axios 安装
// npm 安装 npm install axios --save-dev // 直接用 cdn 引入 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -
使用
// 超时时间 axios.defaults.timeout = 5000 axios.all({ axios({ url: '', params: { "name" : "zhangsan" } methods: '' }), axios({ url: '', params: { "name" : "zhangsan" } methods: '' }) }).then(result => { console.log(result); }) 请求地址 url: "/s', 请求类型 method: 'get', 请求根路径 baseURL: 'https://www.baidu.com'， 请求前的数据处理 transformRequest:[function(data){}], 请求后的数据处理 transformResponse: [function(data){}]. 自定义的请求头 headers:{'x-Requested-With: XMLHttpRequest'), 参数 params:{ wd: 111 }, 超时设置 timeout: 1000, 跨域是否携带 Token withCreatedentials: false, 响应数据格式 responseType: 'json'
387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
