免責事項：この記事への異議を持っている場合は、記事にコメントを記入してくださいはでコメントしています。あなたはこの記事が面白い発見した場合は、共有し、転送、またはあなたが見ることができ、あなたが認識し、私たちの記事を励ましてください。遠く遠くプログラミングの誰もこの道を、願っています。https://blog.csdn.net/weixin_44369568/article/details/91488844
VIEW
1、Vueのことは何ですか？
- VUEのJavascriptを漸進的開発フレームワーク、開発コンポーネントを介して、構成要素の最終的な組み合わせ、組み合わせたアセンブリフォームページであります
- コンストラクタ（コンストラクタ）
- 自動化されたビルドツール
利点
- コンポーネントベースの開発
- ルータでシングルページ
- 豊富なAPIメソッド
- 結合双方向データ
- 単方向データフロー
- 他の第三と一緒に図書館のしやすさ
短所
- エコシステムが完璧ではありません
- やや少ないスケーラビリティ
1、グローバルインストールNPMは、-g VUE-CLIをインストール
2.プロジェクトVUEのinitのWebPACKを作成myprojuct
3、インストールの依存関係がインストールNPM
下包：
cnpm i --save-dev vue
CDN:内容分发网络/智能虚拟网络
v-on:click 缩写 @click
v-on:click="alert($event)" // 阻止默认行为
v-on:click.prevent="alert" // 利用修饰符阻止默认行为
指令
v-show
v-html
v-text
v-bind:src="list.img" // 绑定属性 所有属性都可以
v-for="list in lists" // 循环
插值
{{message}}
v-html="message" // 可以解析html元素
v-text="message" // 只能解析字符串
<div id="app">
{{message}}
{{message+""}} // 表达式
<input type="text" v-model="message">
<button v-on:click="alert">点击</button>
</div>
let vm = new Vue({
el:"#app", // 挂载对象
data:{ // 实例属性 // data是一个方法返回一个对象
message:"世界您好!"
},
beforeCreate(){ // 创建
// 挂载元素 实例属性 实例方法 都没有生成
},
created(){ // 创建完成
// 挂载元素 还是没有被初始化
// 实例属性 实例方法 编译出来
},
beforeMount(){
// 挂载元素 初始化了，但是模板还没有被编译，原样输出
// 实例属性 实例方法 编译出来
},
mounted(){
// 挂载元素 初始化 模板被编译
// 属性 初始化
// 方法初始化
},
beforeUpdate(){
// 数据更新前
},
updated(){
// 数据更新后
// 当数据发生改变都会被updated捕获到
}
methods:{ // 方法
alert(e){
// e.preventDefault();
alert(this.message)
}
}
})
2 app.vue
自动添加前缀
postcss-loader
autoprefixer
sass-loader
{
loader:'postcss-loader',
optiond:{
sourceMap:true,
config:{
}
}
}
vue init webpack-simple aaa
vue
vue-loader
vue-template-compiler
vue-style-loader
<template>
<div>
<h1 v-bind:style="{fontSize:'12px'}">绑定样式</h1> // 直接赋值形式
<h2 v-bind:style="styleObj">绑定样式</h2> // 对象形式
<h3 v-bind:style="[obj1,obj2]">绑定样式</h3> // 数组形式
<p v-bind:class="['text-res':true]">绑定类</p> // 数组形式
</div>
</template>
<script>
export default:{
name:'app',
data(){
return{
styleObj:{
fontSize:"20px",
color:"red"
},
obj1:{
color:"#dec"
},
obj2:{
color:"green"
}
}
},
computed:{
// computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter
sum(){
return Number(this.vall)+Number(this.val2)
}
},
watch:{ // 监听新值和旧值
slogin(){
}
}
}
</script>
<style scoped> // 只在当前作用域里生效
.text-red{
color:red;
}
</style>
3、AJAX
- axios
図4に示すように、撮影したDOM要素
ref="aaa" this.$refs.aaa
6、図回転要素-UI
main.js
import Element from 'element-ui'
Vue.use(Element)
页面
<el-carousel :interval="3000">
<el-carousel-item v-for="(list,ind) in Imgs" :key="ind">
<img :src="list.picUrl" class="img_res">
</el-carousel-item>
</el-carousel>
style
@import url('element-ui/lib/theme-chalk/index.css');
7、モック
下包：
mock-axios-adapter
import mockjs from 'mockjs';
import axios from 'axios';
import axiosAdapter from 'mock-axios-adapter' // 拦截axios请求
const mock = new axiosAdapter(axios);
mock.onGet('地址').reply(200,{
errCode:0,
errMsg:'',
result:[{
url:'./static/img/banner.jpg'
}]
})
8ビューlazyload
1、安装插件
npm install vue-lazyload --save-dev
2. main.js引入插件：
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
error:'./static/error.png',
loading:'./static/loading.png'
})
3. vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy
<img class="item-pic" v-lazy="newItem.picUrl"/>
図9に示すように、スロット
<slot></slot>
两端对齐：
vertival-align:sub
10、キャッシュされたページ
用这个标签包裹起来
<keep-alive>
<router-view/>
</keep-alive>
11、イベント修飾子
.stop
.prevent
.capture
.self
.once
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
12、修飾キー
。入る
。タブ
.delete（キャプチャ「削除」と「バックスペース」キー）
。ESC
。スペース
。アップ
。ダウン
.LEFT //マウスの左ボタンを検出
。右
.ctrl
.ALT
。シフト
.META
図13は、改質剤を形成します
- .lazy
- 。数
- 。トリム