vue学习3

指令写法

自定义指令介绍directives-对普通DOM元素进行底层操作

//注册一个全局自定义指令`v-focus`
Vue.directive('focus',{
		//当被绑定的元素插入到DOM中时
		inserted:focus(el){
			//聚焦元素
			el.focus()
		}
	})

<div id="box">
	<div v-hello>11111</div>
	<div v-hello>11111</div>
</div>
<script type="text/javascript">
	//指令:为了操作底层DOM,作者给留方案
	//实际应用--可以通过指令知道什么时候dom创建完成,从而进行依赖dom的库
	//初始化
	Vue.directive("hello",{
		inserted(el,binding){
		console.log("inserted",el)
		el.style.background="red"
		}
	})
</script>

补充指令

bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置
inserted:被绑定的元素插入到父节点时调用(仅保证父节点存在,但不一定已被插入到文档中)
update:所在组件的VNode更新时调用,但是可能发生在其子VNode更新之前.指令的值可能发生了改变,也可能没有.但是你可以通过比较更新前后的值来忽略不必要的模板更新(详细的钩子函数参数见下)
componentUpdated:指令所在组件的VNode及其子VNode全部更新后调用
unbind:只调用一次,指令与元素解绑时调用

单文件组件

“致命缺点”
全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的
不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

<style lang="scss">
	$width:300px;
	ul li{
		background:yellow;
		width:$width;
	}
</style>
//组件引用
import navbar from './mycomponents/Navbar'
import Vue from 'vue'
//注册
Vue.component("navbar",navbar)

反向代理&别名

让proxy通过vue帮你产生一个代理服务器，
然后通过这个代理服务器去请求数据，最后把请求的数据返回给你

module.expports={
	lintOnSave:false,//暂时关闭代码格式jiance
	//配置反向代理
	devServer:{
		proxy:{
			'/ajax':{
				target:'https://m.maoyan.com',
				changeOrigin:true
			}
		}
	}
}

nport navbar from '@/mycomponents/Navbar'//配置的别名
import sidebar from '@ymycomponents/Sidebar'

spa&路由引入

import VueRouter from 'vue-router'
Vue.use(VueRouter)//注册路由插件
//配置表
const routes=[{
	path:"/film",
	component:Films
}]

重定向

{
	path:'*',
	redirect:'/films'
}

声明式导航

<li>
	<router-link to="/films" active-class="kerwinactive">电影<router-link>
</li>
<li>
	<router-link to="cinemas" active-class="kerwinactive">影院<router-link>
</li>

<router-link to="/films" custom v-slot="{navigate,isActive}">
	<li @click="navigate">电影--{{isActive}}</li>
</router-link>
<router-link to="/cinemas" custom v-slot="{navigate,isActive}">
	<li @click="navigate">影院-{{isActive}}</li>
</router-link>

嵌套路由

import Films from ‘@/views/Films’
import Nowplaying from ‘@/views/films/Nowplaying’
import Comingsoon from ‘@/views/films/Comingsoon’

{
	path:'/cinemas/search',
	component:search
}

编程式导航

不去使用官方所提供的router-link组件标签 实现了组件之间的跳转

router.push('path路径')
router.push({ path: 'path路径' })
router.push({ name: 'routes配置name属性', params: { 属性: 要传递数据 } })  // 传值
  /path/要传递数据

获取参数
     this.$route.params.属性

router.push({ name: 'routes配置name属性', query: { 属性: 要传递数据 } })
  /path?属性=要传递数据
     获取参数
         this.$route.query.属性

methods:{
	handleChangePage(L{
	//编程式导航
	//location.herf="#/detail"
	this.$router.push('/detail')
	})
}

router.push({
     path: '',
     params: ''
 })  // 这种形式传值  获取不到参数

router.replace()替换
router.go(n),n为正整数表示前进,负整数后退,0刷新

动态路由

path:'/detail/:id',
component:Detail

命名路由

name:'kerwinDeta1',//命名路由
path:'/detail/:id',
component:Detail

路由模式

const router=new VueRouter({
	mode:'history',
	routes:[...]
})

当使用history模式时,URL就像正常的url,例如http://yoursite.com/user/id
需要后台配置支持.因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问http://oursite.com/user/id就会返回404

关于Vue cli脚手架的安装

首先在cmd中输入node -v和npm -v检查是否有正确的下载nodejs
下一步输入npm install cnpm -g在全局下载加速器
第二步下载的就是脚手架,输入cpm install vue-cli -g在全局下载脚手架,vue list检查

使用
输入vue init webpack myvue,这里的myvue是项目名称

Project name：项目名称，默认 回车 即可
Project description：项目描述，默认 回车 即可
Author：项目作者，默认 回车 即可
Install vue-router：是否安装 vue-router，选择 n 不安装（后期需要再手动添加）
Use ESLint to lint your code：是否使用 ESLint 做代码检查，选择 n 不安装（后期需要再手动添 加） S
et up unit tests：单元测试相关，选择 n 不安装（后期需要再手动添加）
Setup e2e tests with Nightwatch：单元测试相关，选择 n 不安装（后期需要再手动添加）
Should we run npm install for you after the project has been created：创建完成后直接初始 化，选择 n，
我们手动执行;No, I will handle that myself运行结果

初始化运行
cd myvue
npm install
npm run dev
之后就能进入了