day4 Vue基础
1.安装配置
项目导入vue.js//类似jquery.js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//不建议这样用 现在开发基本用npm来管理依赖
代码提示插件 Vue 2 Snippets
npm管理
1.新建项目文件夹 npm init -y 生成package.json文件 说明是npm项目
2. npm install vue 在node_modules里加了vue依赖
<script src="./node_modules/vue/dist/vue.js"></script>
2.单向绑定
注意：{{name}}只能放在标签体中 如<a href="{{name}}">xx</a>是错误的
想绑定标签的属性要用v-bind 如 <a v-bind:href="name">xx</a>也可以简化<a :href="name">xx</a>
标签属性中若有多个配置时 如<span style="color:red;font-size:10px">xx</span>
改成<span :style="{color:c1,font-size:f1}">xx</span> data中c1:red,f1:10px 要特别注意的是其中v-bind绑定属性写法是个对象{}
<div id="app"> <h1>{{name}},你好</h1> <h1>{{age}}岁</h1> </div> <script> new Vue({ el:"#app", data:{ name:"张三", age:10 } }) </script> //new Vue中定义 el绑定选择器 data定义数据 与小程序的绑定方式一样
3.双向绑定 v-model
<div id="app"> <input type="text" v-model="num"> <h1>{{name}},你好</h1> <h1>人数{{num}}</h1> </div> <script> new Vue({ el:"#app", data:{ name:"张三", num:10 } }) </script> //单向绑定是js中变量改变html中也变 //双向绑定还包含了html中改变js变量也变
4.事件
<div id="app"> <button v-on:click="num++">++</button>
<button v-on:click="cancls">- -</button>
<h1>人数{{num}}</h1>
</div>
<script>
new Vue({
el:"#app", data:{ num:10 },
methods:{
cancls(){
this.num--;
}
}
}) </script> //绑定事件v-on:
//也可以简写 如v-on:click 等价于@click
5.v-for
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
<ul>
<li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'">
<!-- 1、显示user信息：v-for="item in items" -->
当前索引：{{index}} ==> {{user.name}} ==> {{user.gender}} ==>{{user.age}} <br>
<!-- 2、获取数组下标：v-for="(item,index) in items" -->
<!-- 3、遍历对象：
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
-->
<!-- 4、遍历的时候都加上:key来区分不同数据，提高vue渲染效率 -->
</li>
</ul>
6.监听
watch监控变量且变量必须在data中
computed用于监控多个变量或对象
例子 //watch可以让我们监控一个值的变化。从而做出相应的反应。 new Vue({ el: "#app", data: { xyjPrice: 99.98, shzPrice: 98.00, xyjNum: 1, shzNum: 1, msg: "" }, computed: { totalPrice(){ return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum } }, watch: { xyjNum(newVal,oldVal){ if(newVal>=3){ this.msg = "库存超出限制"; this.xyjNum = 3 }else{ this.msg = ""; } } }, })
7.过滤器
<!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 -->
<div id="app">
<ul>
<li v-for="user in userList">
{{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==>
{{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
//过滤器案例1
Vue.filter("gFilter", function (val) {
if (val == 1) {
return "男~~~";
} else {
return "女~~~";
}
})
let vm = new Vue({
el: "#app",
data: {
userList: [
{ id: 1, name: 'jacky', gender: 1 },
{ id: 2, name: 'peter', gender: 0 }
]
},
//过滤器案例2
filters: {
filters 定义局部过滤器，只可以在当前vue实例中使用
genderFilter(val) {
if (val == 1) {
return "男";
} else {
return "女";
}
}
}
})
</script>
8.组件
当某部分页面经常被使用时可以考虑用组件components
组件与Vue实例相比多了template少了el(组件不需要el因为不需要指定某个选择器) template就是html页面模板
<body>
<div id="app">
<button v-on:click="count++">我被点击了 {{count}} 次</button>
<counter></counter>
<counter></counter>
<counter></counter>
<counter></counter>
<counter></counter>
<button-counter></button-counter>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
//1、全局声明注册一个组件
Vue.component("counter", {
template: `<button v-on:click="count++">我被点击了 {{count}} 次</button>`,
data() {
return {
count: 1
}
}
});
//2、局部声明一个组件
const buttonCounter = {
template: `<button v-on:click="count++">我被点击了 {{count}} 次~~~</button>`,
data() {
return {
count: 1
}
}
};
new Vue({
el: "#app",
data: {
count: 1
},
components: {
'button-counter': buttonCounter
}
})
</script>
</body>
9.生命周期钩子函数
了解触发时机 忘记查
beforeCreate() { console.log("=========beforeCreate============="); console.log("数据模型未加载：" + this.name, this.num); console.log("方法未加载：" + this.show()); console.log("html模板未加载：" + document.getElementById("num")); }, created: function () { console.log("=========created============="); console.log("数据模型已加载：" + this.name, this.num); console.log("方法已加载：" + this.show()); console.log("html模板已加载：" + document.getElementById("num")); console.log("html模板未渲染：" + document.getElementById("num").innerText); }, beforeMount() { console.log("=========beforeMount============="); console.log("html模板未渲染：" + document.getElementById("num").innerText); }, mounted() { console.log("=========mounted============="); console.log("html模板已渲染：" + document.getElementById("num").innerText); }, beforeUpdate() { console.log("=========beforeUpdate============="); console.log("数据模型已更新：" + this.num); console.log("html模板未更新：" + document.getElementById("num").innerText); }, updated() { console.log("=========updated============="); console.log("数据模型已更新：" + this.num); console.log("html模板已更新：" + document.getElementById("num").innerText); }
10.vue模块化开发
模块开发简单笔记 1.主文件是src/main.js 2.配置文件config/index.js 3.组件一般统一放在src/components下 组件一般有3个元素 data()是方法而不是对象 <template> </template> <script> export default { data() { return { name: '名字' } } } </script> <style> </style> 4.在路由配置文件router/index.js中导入组件 如import Hello from '@/components/Hello' 注意组件在src中带@
路由中配置如下：{
path: '/hello',
name: 'Hello组件',
component: Hello
}
如果路由中还嵌套一个路由的话加上children元素
例：
{
path: '/el_container',
name: '布局',
component: el_container,
children: [{
path: '/table',
name: 'table组件',
component: el_table
}]
}
最后把组件放置的位置处写上
<router-view></router-view>
vscode代码模板生成方式：文件-首选项-用户片段-文件输入vue-输入以下代码
// https://www.cnblogs.com/songjilong/p/12635448.html { "Print to console": { "prefix": "vue", //配置后vscode输入vue后就能弹出该模板 "body": [ "<!-- $1 -->", "<template>", "<div class='$2'>$5</div>", "</template>", "", "<script>", "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）", "//例如：import 《组件名称》 from '《组件路径》';", "", "export default {", "//import引入的组件需要注入到对象中才能使用", "components: {},", "data() {", "//这里存放数据", "return {", "", "};", "},", "//监听属性 类似于data概念", "computed: {},", "//监控data中的数据变化", "watch: {},", "//方法集合", "methods: {", "", "},", "//生命周期 - 创建完成（可以访问当前this实例）", "created() {", "", "},", "//生命周期 - 挂载完成（可以访问DOM元素）", "mounted() {", "", "},", "beforeCreate() {}, //生命周期 - 创建之前", "beforeMount() {}, //生命周期 - 挂载之前", "beforeUpdate() {}, //生命周期 - 更新之前", "updated() {}, //生命周期 - 更新之后", "beforeDestroy() {}, //生命周期 - 销毁之前", "destroyed() {}, //生命周期 - 销毁完成", "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发", "}", "</script>", "<style scoped>", "//@import url($3); 引入公共css类", "$4", "</style>" ], "description": "生成vue模板" }, "http-get请求": { "prefix": "httpget", "body": [ "this.\\$http({", "url: this.\\$http.adornUrl(''),", "method: 'get',", "params: this.\\$http.adornParams({})", "}).then(({ data }) => {", "})" ], "description": "httpGET请求" }, "http-post请求": { "prefix": "httppost", "body": [ "this.\\$http({", "url: this.\\$http.adornUrl(''),", "method: 'post',", "data: this.\\$http.adornData(data, false)", "}).then(({ data }) => { });" ], "description": "httpPOST请求" } }
11.整合Element ui
https://element.eleme.cn/#/zh-CN/component
npm i element-ui -S //引入element依赖 main.js中引入element组件及样式 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 可以在项目中直接使用element组件了 参考element官方文档
