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>

posted on 2019-04-24 09:57 Tanqurey 阅读(119) 评论(0) 收藏举报