1.Vue标准语法,及引用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>浏览器标题</title>
<link rel="stylesheet" href="外部CSS.css">
<link rel="author" href="humans.txt">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><!-- 调用Vue语法 -->
</head>
<body >
<div id = 've'>
<h1>大家好,我是{{name}}</h1>
</div>
<script>
new Vue({
el:'#ve',
data:{
name:'郭某人'
}
})
</script>
</body>
</html>
2.插入值语法
<h1>大家好,我是{{name}}</h1>
2.指令语法
//单向绑定
<a v-bind:href = 'url' >跳转百度</a>
<a :href = 'url' >跳转百度</a>
//双向绑定(仅用于表单)
<input type="text" v-model:value="date">
<input type="text" v-model="date">
3.实例绑定的两种方法
//方法一:
var a = new Vue({ el="#ve" })
//方法二:
var a = new Vue({})
a.&mount('#ve')
4.Vue中的点击事件
<body >
<div id = 've'>
<button v-on:click = 'mot' >点我一下</button>
<button @click = 'mot2($event,66)' >点我一下2</button>
</div>
<script>
new Vue({
el:'#ve',
methods:{
mot(){
alert('大家好')
},
mot2(event,p1){
console.log(event);
console.log(p1);
}
}
})
</script>
</body>
5.事件的修饰符
<button @click.prevent = 'mot' >点我一下</button>
//precent 阻止默认事件
//stop 阻止事件冒泡
//once 事件只触发一次
//capture 使用事件的捕获模式
//self 只有event.target是当前操作元素的时候才触发事件;
//passive 事件的默认行为立即执行,无需等待事件回调执行完毕
6.键盘事件
<input type="text" @keyup.enter = "mot">
//表示ctrl+y
<input type="text" @keyup.ctrl.y = "mot">
回车=> enter
删除=> delete ( 捕获“删除”和“退格"键)
退出=>esc
空格=> space
换行=>tab(建议使用keydown)
上=>up
下=> down
左=>left
右=>right(另外也可以使用 特殊键的全拼、或者按键编码 )
7.计算属性及调用(computed)
computed:{
xy:{
get(){
return this.x + this.y
}
set(value){}
}
//简写属性
computed:{
xy(){
return this.x + this.y
}
}
8.监视属性watch
watch: {
name:{
immediate:true,//默认为false
deep:true,//默认为false
handler(a,b){
console.log("新值:"+a+",旧值:"+b);
}
}
}
watch: {
name(newValue,oldValue ){
console.log("监视了"+newValue,oldValue);
}
}
9样式的绑定
10.条件渲染
<h1 v-show = 'true'>显示/隐藏1</h1>
<template>该标签不影响节点(结构中不显示)
<h1 v-if = 'false'>显示/隐藏2</h1>
<h1 v-else-if = 'false'>显示/隐藏3</h1>
<h1 v-else>显示/隐藏4</h1>
</template>
11.循环遍历
//遍历数组对象
<div v-for = '(item,index) of Arr' :key = "index">
<h1>{{index}}_{{item.name}}_{{item.age}}</h1>
</div>
//遍历数组
<div v-for = '(a,b) of Obj' :key = "b">
<h1>属性:{{a}}_属性值:{{b}}</h1>
</div>
//遍历字符串
<div v-for = '(a,index) of Obj' :key = "index">
<h1>字符:{{a}}_索引:{{index}}</h1>
</div>
//遍历次数
<div v-for = '(a,b) of 5' :key = "index">
<h1>数字:{{a}}_索引:{{b}}</h1>
</div>
12.13.Vue表单收集
13. Vue内置指令
<h1 v-text = 'text'></h1><!-- 仅支持文本 -->
<h1 v-html = 'text'>值</h1><!-- 仅支持文本且可以编译代码····不安全 -->
<!-- vue组建没加载完毕,会露出{{n}},固可使用这个先隐藏,加载完毕后自动销毁-->
<h1 v-cloak>值</h1>
<h1 v-once>值</h1><!-- 初始化值,只加载一次 -->
<h1 v-pre>不重要</h1><!-- 跳过当前节点 -->
14. Vue自定义指令
<h1 v-big = 'nub'>值</h1>
================================
directives:{
big(a,b){
console.log(b);
console.log(a.innerText);
a.innerText = b.value*10
}
}
15.Vue的生命周期
54.非单文件组建
<body>
<div id="vue">
<pin_top></pin_top>
<pin_dibian></pin_dibian>
</div>
<script>
//1.创建组件
const pin_top = {
template: `
<div>
<h1>{{name}}</h1>
</div>
`,
data() {
return {
name: "菜单"
}
}
}
const pin_dibian = {
template: `
<div>
<h1>{{name2}}</h1>
</div>
`,
data() {
return {
name2: '备案信息'
}
}
}
//注册使用组件
new Vue({
el: "#vue",
components: {
pin_top,
pin_dibian
}
})
</script>
</body>
55.注意事项
56.组件的嵌套
<body>
<div id="vue">
<pin_top></pin_top>
</div>
<script>
const pin_top_1 = {
template: `
<div><h2>{{name}}</h2></div>
`,
data() {
return {
name: '子级'
}
}
}
const pin_top = {
components: { pin_top_1 },
template: `
<div>
<h1>{{name2}}</h1>
<pin_top_1></pin_top_1>
</div>
`,
data() {
return {
name2: '父级'
}
},
}
new Vue({
el: "#vue",
components: {
pin_top
}
})
</script>
</body>
Vue 脚手架的使用
1.配置淘宝镜像
npm config set registry https://registry.npm.taobao.org
淘宝镜像配置成功
2. 全局安装@vue/cli
npm install -g @vue/cli
注意:卡主敲回车
安装成功
输入vue测试
3.创建脚手架(放到指定位置)
找到需要放置的目录位置(切换到指定位置目录)
vue create 目录名
4. 进入这个文件夹(可以在计算机地址栏中输入cmd,直接进入dos)
npm run serve
安装成功,且运行成功
脚手架的四大模块
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
App.js
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<top></top>
<top2></top2>
</div>
</template>
<script>
import top from './components/pin_top.vue'
import top2 from './components/pin_top2.vue'
export default {
name: 'App',
components: {
top,top2
}
}
</script>
组件
<template>
<div>
<h1>{{fuji}}</h1>
</div>
</template>
<script>
export default {
name:"pin_top",
data(){
return {
fuji:"父级"
}
}
}
</script>
064. vue 修改默认配置(没事别瞎修改)
065, ref 的使用
066.
67 插件
68