目录
一、初始vue
1、什么是Vue
2、vue的特点
二、Vue模板语法
Vue模板语法主要有几种
插值:
指令:
三、数据绑定
(1)单向绑定(v-bind)
(2)双向绑定(v-model)
四、el与data的两种写法
1.el有2种写法
2.data有2种写法
3.一个重要的原则
4、写法
五、MVVM模型
六、事件修饰符
七、vue常用指令
八、计算属性(computed)
九、监视属性(watch)
十、组件
1、组件的作用
2、组件分类
3、局部组件
4、全局组件
5、父组件给子组件传参
6、子组件给父组件传参
十 一、路由
1、在组件中使用路由:(声明式)
2、在组件中使用路由:(编程式)
十二、axios的使用
Vue是一个流行的前端JavaScript框架,用于构建交互式的用户界面和单页面应用程序。
易学易用:Vue.js的语法简单易懂,上手容易。
数据驱动视图:Vue.js可以将数据和视图进行关联,当数据发生变化时,视图会自动更新。
组件化开发:Vue.js鼓励使用组件化的开发方式,组件可以独立编写,方便复用和维护。
虚拟DOM:Vue.js通过虚拟DOM技术提高了页面渲染效率。
功能丰富:Vue.js拥有许多插件和工具,可以帮助开发者更快速地构建应用。
使用双大括号{{}}
进行数据插值,将Vue实例中的数据动态地显示在HTML文档中。
例:在Vue实例中有一个名为message
的属性,它的值将动态地显示在该
{{ message }}
以v-
开头的特殊属性,用于为DOM元素添加交互行为或动态操作。
例:v-if
指令用于条件渲染,根据表达式的值决定是否渲染某个元素。 当Vue实例中的 showMessage
属性为true
时,该
{{ message }}
在Vue中,数据绑定可以分为单向绑定和双向绑定两种方式:
{{ message }}
在上面的例子中,{{ message }}
和:src="imageUrl"
都是单向绑定的用法。它们会将数据源中的message
和imageUrl
的值动态地渲染到对应的HTML元素中,实现了数据到视图的单向更新。
1、数据展示:将数据源中的值动态地显示在视图中。
示例:{{ message }}
2、属性绑定:将数据源中的值动态地应用到HTML元素的属性上。
示例::src="imageUrl"
在这个例子中,v-model
指令实现了输入框和数据源之间的双向绑定。当用户在输入框中输入内容时,message
的值会随之改变;反过来,当message
的值改变时,输入框的内容也会同步更新。这样就实现了视图和数据源之间的双向同步。
3、双向绑定的应用场景和元素:
如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。
由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。
new Vue({
el: '#app', // 根元素
data: {
message: 'Hello Vue!', // 数据
count: 0
}
});
const app = new Vue({
data() {
return {
message: 'Hello Vue!', // 数据
count: 0
};
}
});
app.$mount('#app'); // 挂载点
MVVM模型
1. M:模型(Model) :data中的数据
2. V:视图(View) :模板代码
3. VM:视图模型(ViewModel):Vue实例
发现:
1.data中所有的属性,最后都出现在了vm身上。
2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。
以下是一些常用的事件修饰符:
.stop
:阻止事件冒泡。例如,@click.stop
会阻止点击事件继续向上冒泡到父元素。
.prevent
:阻止默认事件。例如,@submit.prevent
会阻止表单的提交行为。
.capture
:使用事件捕获模式而不是冒泡模式。默认情况下,事件是在冒泡阶段触发的,使用.capture
修饰符可以改变为捕获阶段触发。
.self
:只有当事件的目标是当前元素本身时才触发事件处理程序。如果事件冒泡到了目标元素的子元素,事件处理程序将不会被触发。
.once
:事件只会触发一次,即使在同一个元素上多次触发该事件。
.passive
:指示浏览器不应该阻止事件的默认行为。这对于滚动事件等性能敏感的事件非常有用。
v-text
:将数据作为文本插入到元素中,类似于{{ }}
语法。
v-html
:将数据作为HTML插入到元素中。
v-if
:根据表达式的值条件性地渲染元素。
v-else
:与v-if
配合使用,在表达式为false
时渲染元素。
v-show
:根据表达式的值条件性地显示或隐藏元素。
v-for
:基于源数据多次渲染元素或组件。
v-on
(简写为@
):绑定事件监听器,用于在触发DOM事件时执行方法。
v-bind
(简写为:
):动态绑定HTML属性或组件的属性。
v-model
:用于在表单元素上实现双向数据绑定。
v-cloak
:用于在Vue实例尚未编译完成时隐藏模板内容。
v-once
:只渲染元素或组件一次,后续更新将被忽略。
计算属性:
1.定义:要用的属性不存在,要通过已有属性计算得来。
2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
5.备注:
1.计算属性最终会出现在vm上,直接读取使用即可。
2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生
例:姓名案例
姓:
名:
全名:{{fullName}}
监视属性watch:
1.当被监视的属性变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在,才能进行监视!!
3.监视的两种写法:
(1).newVue时传入watch配置
(2).通过vr$watch监视
例子:天气案例
今天天气很{{info}}
使用局部组件的具体步骤
第1步:在src下的components下创建一个单文件组件
单文件组件由三部分组成
template
:页面的结构的script
:该组件的逻辑代码style
:该组件的样式的代码
计数器
{{num}}
import HelloWorld from './components/HelloWorld.vue'
注意:在template模板的地方如果要引入局部的自定义组件,可以使用短横线命名法
或者使用驼峰式命名法
均可
定义全局组件的步骤
import HelloWorld from '@/components/HelloWorld.vue'
/*
全局注册的语法
Vue.comoponent(参数1,参数2)
参数1:组件的名称,这个名称可以在其他组件中直接进行调用
参数2:导入的组件对象名称
*/
Vue.component('HelloWorld',HelloWorld)
<HelloWorld>HelloWorld>
父组件可以通过props属性给子组件传递参数。
以下是一个简单的Vue 2组件示例,演示如何将一个字符串参数传递给子组件:
父组件
<div>
<child-component :message="parentMessage" :count="parentCount" />
div>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentMessage: 'Hello from parent!',
parentCount: 10
};
},
components: {
ChildComponent
}
};
script>
在子组件中,我们需要声明两个props
来分别接收这两个参数:
<div>
<p>{{ message }}p>
<p>Count: {{ count }}p>
div>
<script>
export default {
props: {
message: String,
count: Number
}
};
script>
在Vue.js中,子组件可以通过 $emit
方法触发一个自定义事件,并且可以传递数据给父组件。以下是一个简单的 Vue 2 示例,演示如何在子组件中触发自定义事件并将数据传递给父组件:
<div>
<button @click="sendMessage">发送消息button>
div>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message', 'Hello from child!');
}
}
};
script>
在上面的例子中,我们创建了一个子组件 ChildComponent
,其中包含一个按钮。当按钮被点击时,sendMessage
方法会被调用,并通过 $emit
触发名为 message
的自定义事件,同时传递了一个字符串参数 'Hello from child!'
。
在父组件中,我们可以监听这个自定义事件,并在相应的处理函数中接收传递的数据。以下是一个使用子组件的父组件示例:
<div>
<h1>{{ message }}h1>
<child-component @message="handleMessage" />
div>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
message: ''
};
},
components: {
ChildComponent
},
methods: {
handleMessage(message) {
this.message = message;
}
}
};
script>
在父组件中,我们首先声明了一个 message
变量,用于存储从子组件接收到的消息。然后,在子组件中使用 @message
监听了子组件触发的 message
自定义事件,并指定了一个处理函数 handleMessage
。
在 handleMessage
方法中,我们将接收到的消息赋值给父组件的 message
变量,从而实现了子组件向父组件传递数据的功能。
要在 Vue.js 中使用路由,你需要先安装和配置 Vue Router。下面是一个使用 Vue Router 的简单示例:
npm install vue-router
main.js
文件中配置 Vue Router:import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
];
const router = new VueRouter({
routes
});
new Vue({
router,
render: h => h(App)
}).$mount('#app');
在上面的示例中,我们首先引入了 VueRouter
并通过 Vue.use
告诉 Vue 使用它。
接着,我们定义了一个路由配置数组 routes
。每个路由规则都包含一个 path
属性用于匹配路径,以及一个 component
属性指定对应的组件。
然后,我们创建了一个 VueRouter
实例,并传入路由配置数组。
最后,在根 Vue 实例中将路由实例作为选项传入,并使用 $mount
方法将应用程序挂载到指定的元素上。
<div>
<router-link to="/">Homerouter-link>
<router-link to="/about">Aboutrouter-link>
<router-view>router-view>
div>
<div>
<button @click="goHome">Homebutton>
<button @click="goAbout">Aboutbutton>
<router-view>router-view>
div>
<script>
export default {
methods: {
goHome() {
this.$router.push('/');
},
goAbout() {
this.$router.push('/about');
}
}
};
script>
在上面的示例中,我们使用了
组件来创建导航链接。to
属性指定了链接的目标路径。
组件用于渲染匹配到的组件,根据当前路径动态地切换显示不同的组件。
现在你已经完成了基本的路由配置和使用。当用户点击导航链接时,Vue Router 会自动更新应用程序的 URL,并渲染相应的组件。
一、安装
在项目的根目录,打开终端,输入以下命令行安装Axios
npm install(或简写为 i) axios
二、安装好axios之后,哪些页面需要进行接口数据的调用,就可以在此页面引入axios依赖包。