1.v-on绑定事件
-
语法 :
使用v-on指令注册事件
<标签 v-on:事件句柄=“表达式或者事件处理函数”></标签>
简写方式
<标签 @事件句柄=“表达式或者事件处理函数”></标签> -
注意事项:
事件处理函数作为事件句柄的值不需要调用.
<body>
<div id="div1">
{{num}}
<button v-on:click="say">按钮1</button>
<button @click="say">按钮2</button>
<button v-on:click="num++">加一加一</button>
</div>
</body>
<script>
var vue1=new Vue({
el:"#div1",
data:{
num:11
},
methods:{
say(){
console.log("我说我说")
}
}
})
</script>
2.计算属性和watch
- 1.计算属性
<body>
<div id="div1">
{{birth}}
</div>
</body>
<script>
var vue1=new Vue({
el:"#div1",
data:{
birthday:1429032123201
},
methods:{
say(){
console.log("我说我说")
}
},
computed:{
birth(){
return new Date(this.birthday).getFullYear()+"年" +
new Date(this.birthday).getMonth()+"月"+new Date(this.birthday).getDay()+"日"
}
}
})
</script>
效果：
- 2.Watch监听值的变化
<body>
<div id="div1">
<input type="text" v-model="msg">
</div>
</body>
<script>
var vue1=new Vue({
el:"#div1",
data:{
msg:"我我我我"
},
methods:{
},
watch:{
msg(newVal,oldVal){
console.log("老值:"+oldVal);
console.log("新值:"+newVal);
}
}
})
</script>
3.vue组件
- 1、什么是组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素标签，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
- 总结:
组件是用来完成特定功能的一个自定义的HTML标签 - 2、组件的作用
组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码. - 3、组件的分类
组件分为全局组件和局部组件- 全局组件:在所有vue实例中(.在它所挂载元素下面有效)有效
- 局部组件:在自己vue实例中(.在它所挂载元素下面有效)有效
3.1、全局组件
- 语法：
Vue.component(“自定义标签的名字”,{配置对象}) - 特点：
全局组件可以在任何被挂着的标签中使用.
全局组件的配置对象中必须包含template属性 - 注意事项：
template中的html必须在一个标签中. 仅且只能有一个根节点
应用场景：
如果该组件的特定功能需要在任何被挂着的标签中使用. 推荐使用全局组件
<body>
<div id="div1">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
<div id="div2">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
</body>
<script>
Vue.component("mycomponet1",{
template:"<h1>第一个全局组件</h1>"
});
var templateConfig = {
template:"<h2>第二个全局组件</h2>"
}
Vue.component("mycomponet2",templateConfig);
var app = new Vue({
el:"#div1",
data:{}
});
var app1 = new Vue({
el:"#div2",
data:{}
});
</script>
3.2、局部组件
- 语法：
var app = new Vue({
el: “#app”,
data: {},
components : {
“局部组件的名字1” : {组件的配置对象}
“局部组件的名字2” : {组件的配置对象}
}
}); - 特点：
局部组件只能够在所挂载的标签中使用
<body>
<div id="div1">
<mycomponet1></mycomponet1>
</div>
<div id="div2">
<mycomponet1></mycomponet1>
</div>
</body>
<script>
var app = new Vue({
el:"#div1",
data:{},
components:{
"mycomponet1":{
template:
"<h1>第一个全局组件</h1>"
}
}
});
var app1 = new Vue({
el:"#div2",
data:{}
});
</script>
3.3组件里面模板的写法
<body>
<div id="div1">
<mycomponet1></mycomponet1>
<mycomponet2></mycomponet2>
</div>
<template id="template1">
<h3>这是第一个组件</h3>
</template>
<script type="text/template" id="template2">
<h3>这是第二个组件</h3>
</script>
</body>
<script>
var app = new Vue({
el:"#div1",
data:{},
components:{
"mycomponet1":{
template:"#template1"
},
"mycomponet2":{
template:"#template2"
}
}
});
</script>
3.4 模板里面的数据使用函数 返回值
3.4.1组件中数据的定义
- 语法:
"组件的名字":{
template: "",
data : function(){
return {
键1:值1,
键2:值2
}
}
}
- 注意事项:
- data数据只能够以函数的形式返回,因为函数中可以写其他的业务代码
- 只能够在各自的组件模板中使用各自的组件中的data数据
- Vue对象中的数据不能够在组件中使用. 组件的数据也不能够在挂载的html标签上使用.
<body>
<div id="div1">
<mycomponet1></mycomponet1>
</div>
<template id="template1">
<!-- 必须存在根元素包裹-->
<div id="div2">
{{msg}}:<input type="text" name="username">
</div>
</template>
</body>
<script>
var app = new Vue({
el:"#div1",
data:{},
components:{
"mycomponet1":{
template:"#template1",
data(){
return {msg:"用户名"}
}
},
}
});
</script>
4.路由——router
- 1、什么是路由
路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含子啊vue中，是一个插件，需要单独下载。
官方地址：https://router.vuejs.org/zh/ - 2、如何使用
- 先安装
npm install vue-router - 引入文件
- 先安装
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<body>
<div id="div1">
<router-link to="/index">首页</router-link>
<router-link to="/product">产品</router-link>
<router-link to="/about">关于我们</router-link>
<router-view></router-view>
</div>
</body>
<script>
var index= Vue.component("index",{
template:"<h1>这是首页</h1>"
})
var product=Vue.component("product",{
template:"<h1>这是产品</h1>"
})
var about=Vue.component("about",{
template:"<h1>关于我们</h1>"
})
var router=new VueRouter({
routes:[
{
path:"/index",
component:index
},
{
path:"/product",
component:product
},
{
path:"/about",
component:about
}
]
})
var app = new Vue({
el:"#div1",
data:{},
router:router
});
</script>
5 webpack(了解)
5.1 webpack是什么
把所有的项目资源 打包成一些比较小的资源
5.2 为什么需要打包?
作用:
- 减少页面对于资源的请求,提高效率
- 可以降低版本,Es6–>Es5为了兼容浏览器
- 将代码打包的同时进行混淆，提高代码的安全性。
5.3 JS打包用法
- 1.安装
npm install -g webpack
npm install -g webpack-cli
- 2.创建一些代码
a.js
var a = "a模块";
var b = require('./b.js');
console.log(b);
b.js
define(function () {
var b = "b模块";
return b;
});
- 3.运行打包的命令
webpack src/a.js -o dist/bundle.js
- 4.创建一个html页面 ,引入bundle.js文件
5.4 打包配置文件方式
在项目的根路径下面创建一个文件:
webpack.config.js
var path = require("path");
module.exports = {
entry: './src/a.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
}
}
//运行
webpack
5.5 css打包用法
- 1.下载安装 css加载器
css-loader style-loader
npm install style-loader --save-dev
npm install css-loader --save-dev
-
- 配置webpack.config.js
const path = require('path');
//配置入口 和出口
module.exports = {
entry: './src/a.js',//入口文件
output: { //出口
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},module: {
rules: [
{
test: /\.css$/, //匹配文件规则
use: ['style-loader', 'css-loader'] //匹配后使用什么加载器进行模块加载
// webpack use的配置，是从右到左进行加载的
}
]
}
};
- 3.在js文件里面引入css
var a ='aaa';
var b =require('./b.js');
require('../css/index.css')
console.log(b);
- 4.在终端 terminal运行 webpack
生成一个bundle.js这个文件
- 5.在页面引入该文件bundle.js
6.Vue-cli脚手架
- 简介
在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。
幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli
使用它能快速的构建一个web工程模板。 - 使用
(1)npm install -g @vue/cli
(2)vue create hello-world
(3)选中 VueProject(第二个)
(4) cd hello-world
yarn serve
yarn build
(5) npm run serve
118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
