文章目录
1、cdn方式导入Vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
加入代码就可以。
示例:
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello!",
ok: true,
type: 'A'
}
});
var v1 = new Vue({
el:"#vue" ,
data:{
items: [
{message: "hello"},
{abc: "abc"}
]
}
});
</script>
2、Vue如何做到绑定数据
1、首先一个div ,需要展示一条字符串,变量名为message, {{}}为取值操作
<div id = "app">
{{message}}
</div>
2、现在有了值展示,值去哪里取呢?
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello!",
}
});
</script>
el:绑定div的 id
data声明数据, message就是一会要展示的。
3、另一种取值方式
<div id = "app">
<span v-bind:title="message">
鼠标悬停在这里将显示message的值
</span>
</div>
使用v-bind指令 绑定了message,也可以取值。
3、Vue如何绑定事件
在methods里声明具体的方法, 然后通过v-on:事件=“方法名”的方式绑定具体的方法。
当然在最前面要绑定Vue对象和dev id
<div id="app">
<button v-on:click="Hello">click</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
Hello: function (){
alert("hello");
}
}
});
</script>
4、Vue基本语法
if判断
使用v-if 、 v-else 、 v-else-if 指令
<div id = "app">
<h1 v-if="flag"> true</h1>
<h1 v-else>false</h1>
<h2 v-if="type==='A'"> A</h2>
<h2 v-else-if="type==='B'"> B</h2>
<h2 v-else> C</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true,
type: 'A'
}
});
</script>
for循环
使用v-for 指令, 后面就像是加强for,可以添加index变量来取出下标
<div id = "vue" >
<li v-for="item in items">
{{item.message}}----{{index}}
</li>
<li v-for="(item, index) in items">
{{item.message}}----{{index}}
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var v1 = new Vue({
el:"#vue" ,
data:{
items: [
{message: "hello"},
{message: "abc"}
]
}
});
</script>
5、双向绑定
定义:
当我们在页面输入了一些信息,或者是选择了一些东西,这个信息绑定到vue的data中,并且这个data对象能立刻应用显示在页面中的技术。
具体语法就是在组件中用v-model=“”绑定data中的具体对象
代码:
<div id="app">
输入文本: <input type="text" v-model="message"> <br>
输入的文本是:{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "请输入"
}
})
</script>
效果如图下图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ONgMLNE-1666859186373)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023101652385.png)]
当在文本框中输入
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FvlJmrRu-1666859186375)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023101739547.png)]
没有刷新页面,只是更改了输入框的内容,更改之后的内容就会同步更改在页面上。
redio的双向绑定
<div id="app">
<input type="radio" value="男" v-model="message">男<br>
<input type="radio" value="女" v-model="message">女<br>
选择的是:{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: ""
}
})
</script>
效果:
第一次加载页面:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XEfUMl1x-1666859186376)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023102216782.png)]
点击选择之后:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xAHwuniq-1666859186376)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023102258908.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RnFeS9Ah-1666859186377)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023102316219.png)]
复选框的双向绑定
<div id="app">
<select v-model="message">
<option disabled value="">--请输入--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
选择的是:{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: ""
}
})
</script>
注意:–请输入–这个的作用是为了刷新页面之后依然能够点击选择
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xk5ovooF-1666859186378)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023102716696.png)]
6、自定义组件
1、组件其实就是一个模板,然后在页面上调用这个组件,就会显示模板里边内容
组件的定义:
Vue.component(“组件名字”, {组件对象}); props用来接收数据, templat里面写组件
Vue.component( "heComponent",{
props: ['temp'],
template: '<li>{{temp}}</li>'
});
应用例子
<div id="app">
{{message}}
<heComponent v-for="item in items" v-bind:temp="item"></heComponent> //这个是错误示范,如果组件定义命名为小驼峰式,调用就要用-分割单词
<blog-post v-bind:title="message"></blog-post>
<he-component v-for="item in items" v-bind:temp="item"></he-component> //正确示范
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//小驼峰命名的组件
Vue.component( "heComponent",{
props: ['temp'],
template: '<li>{{temp}}</li>'
});
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
var vm = new Vue({
el: "#app",
data: {
message: "canGet",
items: ["hello", "I", "am", "haoshui"]
}
});
</script>
7、Axios异步通信
文件目录结构:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jwZ0RS5B-1666859186379)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023162214362.png)]
代码(获取data.json数据返回给页面)
<div id="app">
{{info.name}}
{{info.address.province}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data(){
return{
info:{
name: null,
address: {
city: null,
province: null
}
}
}
},
mounted(){
axios.get("./data.json").then(response=>{this.info=response.data});
}
});
</script>
8、computed属性
定义:
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message
还没有发生改变,多次访问 reversedMessage
计算属性会立即返回之前的计算结果,而不必再次执行函数。
理解:
computed属性类似methods, 都是写函数进行操作计算,methods中的方法会在每次需要数据的时候都重新计算一次,computed属性里的方法会在第一次调用之后将结果存在缓存中,如果数据没有变化,那么就不会更改缓存中的数据,当下一次需要这个数据的时候,就不需要再次执行函数,而是从缓存中直接返回数据。
相关语法:
computed: {
Time:function () {
this.message;
return Date.now();
}
}
例子:
<div id = "app">
{{Time}}<br>
{{TimeMethod()}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
computed: {
Time:function () {
return Date.now();
}
},
methods: {
TimeMethod: function (){
return Date.now();
}
}
});
</script>
因为date是会一直更新的,所以只要刷新页面,Time属性就会改变。但是在控制台里面持续的输出Time就不会有改变,因为Time已经存在缓存里了,就不会调用函数。如果是定义在methods中,在控制台里调用值就会改变。
**提示:如果感觉不太理解,把代码复制运行一遍,体验体验 **
在控制台中调用TimeMethod
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-apofYsGm-1666859186379)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023165841570.png)]
在控制台中输出Time
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lhD29bXP-1666859186381)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221023165934791.png)]
9、Webpack
作用
因为Vue开发是面向Es6标准的, 但是大部分浏览器还是html5标准,所以说在编译的时候需要把开发环境的版本降级,webpack就可以做这个。
10、实战
1、创建项目
新创建一个文件夹, 在文件夹里面运行cmd
输入指令 test为项目名称
npm init webpack test
之后会弹出一些选项
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NyflT9iF-1666859186383)(C:\Users\86182\AppData\Roaming\Typora\typora-user-images\image-20221024175121854.png)]
确定就回车,否定就输入n。
然后需要进入项目目录
安装vue-router
cnpm install vue-router
安装 element-ui
npm i element-ui -S
安装依赖
npm install
安装sass
cnpm install sass-loader node-sass