vue2.5入门(推荐,差代码)

原创
2018/04/26 21:45
阅读数 457

课程地址:https://www.imooc.com/learn/980

 

教程:https://cn.vuejs.org/v2/guide

放在头部,避免页面出现抖屏

挂载点

下面是原生

模板

<!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">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        
    </div>
    <script>
        // 挂载点,模板,实例之间的关系
        new Vue({
            el: "#root",//挂载点
            template:   '<h1>{{msg}}</h1>',//模板
            data: {
                msg:    "hello world1"//实例
            }
        })    
        // 在vue内部实际操作
        // var dom = document.getElementById('root')
        // dom.innerHTML = "hello world"


    </script>
</body>
</html>

插值表达式,写法一

v-text指令,写法二

v-html指令,写法三

v-html与v-text区别:

被转义

未被转义

<!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">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 写法一:插值表达式 -->
        <h1>{{number1}}</h1>
        <!-- 写法二:v-text指令 -->
        <h1 v-text='number2'></h1>
        <!-- 写法三:v-html指令 -->
        <h1 v-html='number3'></h1>
        <!-- v-html与v-text区别:v-html的标签对未被转义 -->
        <h1 v-text='number4'></h1>
        <h4 v-html='number4'></h1>
        
    </div>
    <script>
        // vue实例中的数据
        new Vue({
            el: "#root",
            data: {
                msg:    "hello world1",
                number1:    '111',
                number2:    '222',
                number3:    '333',
                number4:    '<h1>444</h1>'
            }
        })    



    </script>
</body>
</html>

指令,v-on绑定事件,箭头函数

 

简写

v-bind指令,绑定title,属性绑定

等号后面内容是js表达式,不是字符串

简写

单项绑定

v-model指令,双向数据绑定

<!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">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- <div    v-on:click='()=>{alert(123)}'>{{content}}</div> -->
        <!-- v-on事件绑定 -->
        <div    v-on:click='handdleclick'>{{content}}</div>
        <!-- v-on事件绑定的简写 -->
        <div    @click='handdleclick'>{{content}}</div>

        <!-- v-bind属性绑定 -->
        <div v-bind:title='title'>hello title1</div>
        <div v-bind:title='"del lee"   +   title'>hello title2</div>
        <!-- v-bind属性绑定的简写    -->
        <div :title='title'>hello title3</div>
        
        <!-- v-model数据双向绑定 -->
        <input v-model='double'>    
        <div>{{double}}</div>     
                    
    </div>
    <script>
        // vue中的绑定事件
        new Vue({
            el: "#root",
            data: {
                content:    "hello world1",
                title:  'this is hello world',
                double: 'this is data'
            },
            methods: {
                handdleclick:   function(){
                    // alert(123)
                    this.content = 'world'
                }
            }
        })    



    </script>
</body>
</html>

computed,计算属性,如果没改变,会使用上一次计算的缓存结果

计算

和react的reselect库很像

watch,侦听器

<!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">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root"> 
               姓:<input v-model='firstName'>     
               名:<input v-model='lastName'>
               <div>{{firstName}}   {{lastName}}</div>
               <div>{{fullName}}</div>   
               <h2>{{count}}</h2>  
               
    </div>
    <script>
        // vue中的计算属性和侦听器
        new Vue({
            el: "#root",
            data: {
                firstName:  '',
                lastName:   '',
                count:  0
            },
            computed: {
                fullName:   function(){
                    return  this.firstName  +   '   '    + this.lastName
                }
            },
            watch: {
                firstName: function(){
                    this.count  ++
                },
                lastName:   function(){
                    this.count  ++
                }
            }
        })    



    </script>
</body>
</html>

指令v-if,会从dom树上清除

点击隐藏显示

指令v-show,不从dom树上删除

display=none

指令v-for,数据做循环

:key会提升每项渲染数据的效率,但是要求每一项数据不同

添加index下标,相同数据也可以

但如果要频繁对数据进行排序,index会出错。

<!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">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root"> 
        <!-- v-if指令,会从dom上清除 -->
        <div v-if='show1'>hello1</div>
        <button @click=handleClick1>toggle1</button>

        <!-- v-show指令,不会从dom上清除 -->
        <div v-show='show2'>hello2</div>
        <button @click=handleClick2>toggle2</button>

        <!-- v-for指令,数据循环 -->
        <ul>
            <li v-for='item of list1'>{{item}}</li>
        </ul>
        <!-- :key会提升每项渲染数据的效率,但是要求每一项数据不同 -->
        <ul>
            <li v-for='item of list2' :key="item">{{item}}</li>
        </ul>
        <!-- 添加index下标,相同数据也可以 -->
        <ul>
            <li v-for='(item,index) of list3' :key="item">{{item}}</li>
        </ul>
    </div>
    <script>
        // vue中的计算属性和侦听器
        new Vue({
            el: "#root",
            data: {
                show1:   true,
                show2:   true,
                list1:   [1,1,1],
                list2:   [4,4,6],
                list3:   [7,6,6],     
            },
            methods: {
                handleClick1:    function(){
                    this.show1   =   !this.show1
                },
                handleClick2:    function(){
                    this.show2   =   !this.show2
                }
            }

        })    



    </script>
</body>
</html>

点击提交并且数据写在下边,input框消失

Vue.component定义的是全局组件

var一个,局部组建,在父组件外边是调用不了的

组件声明,实例模板里就可以使用

传参

会报错,彩曾传递不能直接使用

利用props来接收传递过来的参数

每一个vue的组件又是vue的一个实例

根组件下没有模板的时候,会用挂载点下的内容当模板

 

父组件到子组件通过属性传递

子组件如果想被删除,就要在父组件里把子组件的那条数据给删除

增加一个参数,index

接收index。通过$emit通知父组件,触发delete事件

父组件监听delete事件,监听到的时候,触发handleDelete事件

通过子组件向父组件传值的方式,做好删除

 

 

npm install --global vue-cli
vue init webpack todolist
cd todolist
npm run dev

bulid下放置webpack的配置文件

config是针对开发环境和线上环境的一些文件

node_modules是项目的依赖

src是源代码所放置的目录

static是静态资源

浏览器编译,es6检测,不需要改动

整个网页app

——————————————————

src/main.js整个项目的入口文件

创建了一个vue的实例,id=‘app’的挂载点

注册了一个局部组建App(es6语法引入)

模板就是App组建的内容

Es6:如果键值都相同,只写一个App

template模板,script标签-组建逻辑,style样式

vue-cli里的语法:单文件组建

npm run dev
npm run start

以前data是对象,用{},现在是函数

es6简化写法

this指向本组件的实例

缩写,别名

注册局部组建

v-for循环

父组件向子组件传值,利用属性传值

子组件接收传值

增加功能实现

传递index

接收传递

解决console里的警告问题,加一个:key

子组件触发事件传递父组件,$emit

父组件监听delete

触发删除事件

子组件样式不会影响父组件

scoped样式作用域

去掉scoped就会影响父组件

 

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部