vue
cli 构建项目
cli是脚手架工具, 可以快速构建一个vue项目。
–安装 淘宝镜子， 以后可以用cnpm代替npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
–安装cli，升级为3.1
cnpm install -g @vue/cli
–在一个目录下执行,myvue表示项目名称,
vue init webpack myvue
现在的项目目录结构
– 安装项目所需要的依赖
cd myvue
cnpm install
– 启动项目
npm start 或者 npm run dev
– 运行后访问如下， 一个基本的vue项目就建立成功了
基本指令
打开src/components/helloword.vue，可以看到大致的代码结构是如下3部分组成
模板语法练习
在HelloWorld.vue中练习
{{"。。。"}}
{{1+2}}
{{"" ? "yes" : "no"}}
{{msg.split("").reverse().join("")}}
v-once不随着变量改变而改变{{msg}}
当href中使用变量的正确用户，直接写< a href="{ {url} }>"会报错
我是文字，将v-bind省略，简写形式
为真
为假
v-show和v-if都可以控制元素显示和隐藏，区别是v-show是全部渲染再通过css的切换，而v-if是true时才渲染
- {{i}}{{item}}
- {{i}}{{item.name}}-{{item.age}}
- 遍历对象:
- {{index}}{{key}}-{{value}}
新建自己的模板
在components下新建文件VueDemo.vue如下
{{getMsg}}
修改App.vue将VueDemo.vue引入， 就能看到VueDemo.vue的内容了。
css样式绑定
通过计算属性得到的{{getMsg}}
啦啦啦
用对象控制
用数组设置
啦啦啦
内联
子组件和父组件之间的传值
新建一个learn.vue
{{data}}
在App.vue中引入learn.vue
{{sonData}}
输入数据传给子组件
子组件传给父组件需要事件触发
动态组件
之前用组件都是将组件之间写在那里， 其实可以在component动态的绑定组件,，如下可以通过事件去切换组件。
export default {
name: 'App',
components: {
HelloWorld,
VueDemo,
learn,
A,
B
},
data(){
return{
flag:true,
currentComponent:A
}
},
methods:{
change(){
if (this.flag){
this.currentComponent = B;
this.flag = false;
}else{
this.currentComponent = A;
this.flag = true;
}
}
}
}
组件A如下， 通过事件改变content值
A组件
{{content}}
在切换A，B两个组件时，还想让页面记住我在A页面上的操作的话， 只需要使用keep-alive包裹到，这样A页面改变值后，即使切到B组件再切回来A，A的值还是上次的改变的结果
获取原始dom
之前都是通过绑定去修改值的，也可以获取dom, 使用ref
原始值
改变, 其中mounted是在模板渲染成html后自动调用
mounted(){
this.$refs.p1.innerHTML = "改变啦"
},
插槽slot
- 单个插槽
父组件, 只需要在子组件中写html
- 1
- 2
子组件child2， 用slot将父组件的html引入
子组件
- 多个插槽
- 在父组件中指定了每个插槽的名字，在子组件中可以根据插槽名称来获取
s1内容
s2内容
子组件如下，因为父组件中没有s3的插槽，所以会显示默认信息
子组件
插槽s3默认信息
- 作用域插槽
可以让子组件传递数据给父组件
子组件
父组件使用slot-scope接收子组件内容
- {{item}}
动画效果
使用Animate.css， 在index.html中引入
hello
export default {
name: 'App',
data(){
return{
flag:true
}
}
methods:{
change(){
this.flag = !this.flag;
}
}
}
自定义指令
再打开百度的时候，即使不点击搜索框之间打字也能输入，文本框已经自动的有了焦点，通过自定义指令，可以轻松的实现这个功能
在main.js中创建一个全局的自定义指令
Vue.directive("focus",{ //指令名称focus
inserted:function (el) {//在插入的时候， el表示使用自定义组件的元素
el.focus();
}
})
在模板中使用
过滤器
在data同级创建一个过滤器
使用过滤器，显示为￥20.12
{{money|rmb}}
vue-router
安装
npm install vue-router
在main.js中引入
import Vue from 'vue'
import App from './App'
import HelloWorld from "./components/HelloWorld"
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//创建路由
const router = new VueRouter({
routes:[
{
path:"/hello",
name:"HelloWorld",
component:HelloWorld
}
]
})
Vue.vue
现在访问http://localhost:8080/#/hello就能看到HelloWorld模板的内容
- 抽取main.js的路由配置
在src下创建router/router.js
import Vue from "vue";
import VueRouter from "vue-router"
import HelloWorld from "@/components/HelloWorld"
Vue.use(VueRouter)
export default new VueRouter({
routes:[
{
path:"/hello",
name:"HelloWorld",
component:HelloWorld
}
]
})
在main.js只需要引入上面创建的router.js即可
import router from '@/router/router'
记得添加router要显示的地方
- router-link
作用是在多个路由间切换。
新建一个routerLearn.vue
router学习
在router.js中添加routerLearn
import Vue from "vue";
import VueRouter from "vue-router"
import HelloWorld from "@/components/HelloWorld"
import routerLearn from "@/components/routerLearn"
Vue.use(VueRouter)
export default new VueRouter({
routes:[
{
path:"/hello",
name:"HelloWorld",
component:HelloWorld
},
{
path:"/routerLearn",
name:"routerLearn",
component:routerLearn
}
]
})
使用。
问好
去学习
- 动态路由
在跳向一个路由时还可以携带参数过去
修改
export default new VueRouter({
routes:[
{
path:"/hello",
name:"HelloWorld",
component:HelloWorld
},
{
path:"/routerLearn/:user/:id",
name:"routerLearn",
component:routerLearn
}
]
})
跳转
去学习
在模板中显示参数
router学习{{this.$route.params.user}}{{this.$route.params.id}}
- 路由嵌套
在一个路由中再次添加子路由
{
path:"/routerLearn",
name:"routerLearn",
component:routerLearn,
children:[
{
path:"routerChild1",
component: routerChild1
},
{
path:"routerChild2",
component: routerChild2
}
]
}
进行跳转
学习1
学习2
- 编程式导航
以上都是用router-link 进行跳转的，也可以用this.$router.push
methods:{
comChild1(){
this.$router.push("/routerLearn/routerChild1");
}
}