VUE重修01
---恢复内容开始---
1、框架与库的区别
前端框架与库的区别?
-
jquery 库 -> DOM(操作DOM) + 请求
-
art-template 库 -> 模板引擎
-
框架 = 全方位功能齐全
-
简易的DOM体验 + 发请求 + 模板引擎 + 路由功能
-
-
KFC的世界里,库就是一个小套餐, 框架就是全家桶
-
代码上的不同
-
一般使用库的代码，是调用某个函数，我们自己把控库的代码
-
一般使用框架，其框架在帮我们运行我们编写好的代码
-
框架: 初始化自身的一些行为
-
执行你所编写的代码
-
施放一些资源
-
-
-
2、vue使用npm下载完成后，其文件夹下会有几个不同后缀的文件：
1)vue.common.js是以commomjs为规范的文件
2）vue.esm.browser.js则是es6为标准的commonjs文件
3）vue.esm.js 是以es6为标准的
3.vue的基本使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./node_modules/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
<script>
new Vue({
el:'#app',//目的地
template:'<div>{{msg}}</div>',//只允许一个根标签,没有的话默认加载app根元素
data(){
return{
msg:'hello'
}//数据驱动视图，在vue实例对象
}
})
//插值模板语法:双花括号
</script>
</html>
花括号中允许插入对象，字符串，布尔值，三元表达式，对象要在花括号外加空格
隔开
4、指令：
在vue中提供了一些对于页面+数据更方便的输出，这些操作被称为指令
以v-xxx表示，封装了一些DOM行为
v-text/v-html:渲染相应的文本/模板内容
v-if/v-show：销毁或创建元素/隐藏或显示元素
v-if可与v-else搭配使用
v-for循环
v-for='（item,index） in menuLists' //item是值的每一项.index是数组的索引
v-bind 为元素的属性绑定值，主要实现的是单向数据绑定
:属性=‘data变量’
v-on绑定事件，简写@
v-model:双向数据绑定语法糖，但仅能在表单元素内绑定
尝试用vue内部实现：
5、局部组件
1）局部组件可以使用以下方式进行声明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./node_modules/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
<script>
//局部组件：声子，挂子，用子
let App={//组件名称首字母必须大写
template:'<div>entry{{msg2}}</div>',
data(){
return {
msg2:'ok啦'
}//必须使用函数返回一个对象
}
}
new Vue({
el: '#app',//目的地
template: '<App />',//这里的标签可以是单闭合
data() {
return {
msg: 'hello'
}
},
components: {
App
}
})
//插值模板语法:双花括号
</script>
</html>
4、全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./node_modules/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
<script>
//全局组件
Vue.component('Vbtn',{//挂载到了vue的实例上,该实例的子组件
//也可以使用这个全局组件
template:'<button>hello</button>'
})
new Vue({
el: '#app',//目的地
template: '<Vbtn />',//这里的标签可以是单闭合
data() {
return {
msg: 'hello'
}
},
components: {
//不需要挂载Vbtn,已经挂载好了
}
})
//插值模板语法:双花括号
</script>
</html>
