Vue笔记
文章目录
- Vue.js
- 安装与使用
- 声明式渲染
- vue的各种属性
- v-bind
- v-if
- v-else
- v-for
- v-on
- v-model
- 计算属性
- 计算器实例
- 点击某一文本变色
- 组件化
- Vue项目
Vue.js
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
安装与使用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
声明式渲染
可以通过 {{}} 这种形式来动态的显示数据,数据由data提供
<div id="app">
{{ message }}
div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
vue的各种属性
v-bind
数据绑定,用于绑定一个dom的属性值
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
<img v-bind:src="imgurl" >
<img :src="imgurl" >
div>
body>
<script src="../js/vue.js">script>
<script type="text/javascript">
const vue=new Vue({
el: "#app",
data:{
imgurl:"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1588240653&di=d9800e88342e14593c72b90f023a1129&src=http://pic3.16pic.com/00/01/11/16pic_111395_b.jpg"
},
methods:{
}
});
script>
html>
v-if
v-else
v-for
v-on
v-model
vue实现了双向绑定
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
<input type="text" name="username" id="" v-model="message" />
{{message}}
div>
body>
<script src="../js/vue.js">script>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {
message:"abc"
},
methods: {}
});
script>
html>
计算属性
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
<h2>{{FirstName}}{{LastName}}h2>
<h2>{{Name()}}h2>
<h2>{{fullName}}h2>
<h2>{{fullname2}}h2>
div>
body>
<script src="../js/vue.js">script>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {
FirstName: "L",
LastName: "R"
},
computed: {
// 计算属性的简便写法
fullName: function() {
return this.FirstName + '' + this.LastName;
},
fullname2: {
// 计算属性有set和get方法
get: function() {
return this.FirstName + '' + this.LastName;
}
}
},
methods: {
Name: function() {
return this.FirstName + '' + this.LastName;
}
}
});
script>
html>
计算器实例
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
<h2>当前计数:{{counter}}h2>
<button type="button" v-on:click="counter++">+button>
<button type="button" @click="sub">-button>
div>
body>
<script src="../js/vue.js">script>
<script type="text/javascript">
const vue=new Vue({
el: "#app",
data:{
counter:0
},
methods:{
<!-- 定义函数 -->
sub:function(){
<!-- this表示当前vue实例 -->
this.counter--;
}
}
});
script>
html>
点击某一文本变色
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<style type="text/css">
.active {
background: yellow
}
style>
<body>
<div id="app">
<ul>
<li :class="{active:categoryIndex==index}" v-for="(m,index) in movies" @click="change(index)">{{m}},{{index}}li>
ul>
<h2>{{categoryIndex}}h2>
div>
body>
<script src="../js/vue.js">script>
<script type="text/javascript">
const vue = new Vue({
el: "#app",
data: {
movies:['海王','海尔兄弟','123','456'],
categoryIndex: 0, //点击当前背景变成白色索引
},
methods: {
change:function(index){
this.categoryIndex=index
}
}
});
script>
html>
组件化
组件的data必须是function
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
<cpn>cpn>
<cpn>cpn>
div>
body>
<template id="cpn">
<div>
<h2>组件化h2>
<h3>123h3>
div>
template>
<script src="../js/vue.js">script>
<script type="text/javascript">
// 注册全局组件
Vue.component('cpn',{
template:'#cpn'
})
const vue = new Vue({
el: "#app",
data: {
message: "abc"
},
methods: {}
});
script>
html>
Vue项目
推荐路由方面的视频推荐的视频
安装路由的命令npm i vue-router -S
Vue项目是用来写单页面应用的，只有一个html页面，但是里面的内容会用路由根据用户的选择加载数据和视图。
还可以自己创建html，只是引入vue.js .
main.js
import Vue from 'vue'
import App from './App.vue'
import router from 'vue-router'
import account from './components/account.vue'
Vue.config.productionTip = false
Vue.use(router)
var r=new router({
routes:[
{path:'/account',component:account}
]
})
new Vue({
// render的意思是将App.vue中的模板加载((替换))到#app的区域中
// #app在public文件夹的index.html中
render: h => h(App),
router:r
}).$mount('#app')
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<h2>1231231313h2>
<router-link to="/account">Acrouter-link>
<router-view>router-view>
div>
template>
<script>
import HelloWorld from './components/HelloWorld.vue'
//导出为app
export default {
name: 'app',
components: {
HelloWorld
}
}
script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
style>
现在可以尝试一个项目了
下载cli
npm install -g @vue/cli
使用vue -v查看版本
Vue项目
相关插件
1. vue/cli-plugin-router
2. vue-cli-plugin-element
相关依赖
运行依赖：
1. axios
2. core-js
3. echarts
4. element-ui
5. vue
6. vue-router
开发依赖
1. less
2. less-loader