Vue.js 初体验

初体验

引入vue

找到官网的在线连接或者下载到本地的链接通过src 引入路径

实例化 vue

new Vue({
	el:'选中某个容器作为数据的最外层,决定数据挂载在哪个元素之下',
	data:{
		专门用来存放数据的地方
	},
    methods:{
        专门用来存放方法(函数)的地方
    }
})

在html中的使用 {{}} 中的内容就是data中的键

{{}} 表示胡子语法,mustache语法

如果data中还有一个对象,则需要一级一级往下找.

双向绑定

1.原理

vue 双向数据绑定原理是通过 数据劫持 结合 发布模式 的方式来实现的,也就是说数据和视图同步 , 数据发生变化 , 试图跟着发生变化 , 试图变化 , 数据也随之发生改变

2.核心

关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；

使用Vue 实现双向绑定

通过 v-model 指令改变Vue中对应的属性从而改变html中使用{{胡子语法}} 引用的属性

<input type="text" v-model='msg'>
 	<!-- v-model 指令 -->
<h1>{{msg}}</h1>

new Vue({
        el: "#app",
        data: {
            msg:'你好世界'
        }
    })

简易实现双向绑定

主要通过 defineProperty 方法实现属性的名称必须加'引号'

Object.defineProperty(对象的名称,'属性的名称',配置项)

配置项中的

get 表示定义这个属性名时要给他赋值的属性

set 表示当你拿到最新的值时,你想要做的事

<input type="text" id="ipt" oninput="iptChange(this.value)">
    <h1 id="title"></h1>

   // 获取元素
    var ipt = document.querySelector('#ipt')
    var title = document.querySelector('#title')

    // 声明一个data对象,专门用来放数据
    var data = {}

    // 用来给对象动态添加属性       define-定义     Property-属性
    // Object.defineProperty(对象的名称,属性的名称,配置项)  属性名称必须加'引号'
    Object.defineProperty(data, 'msg', {
        // get 代表定义这个msg时要给他赋值的数据
        get: function () {
            return '你好世界'
        },
        // set 代表当你拿到最新的值时,你想要去做什么事
        set: function (newValue) {
            // 检测到  msg已经被修改
            title.innerHTML = newValue
            ipt.value = newValue
        }
    })

    title.innerHTML = data.msg
    ipt.value = data.msg

    function iptChange(val) {
        // console.log(val);
        data.msg = val      // 修改数据源 (data.msg) ,会自动触发
    }

模板语法

插值操作

 new Vue({
        el: "#app",
        data: {
            seyHi: '<h1><b>你好，周游。</b></h1>',
            seyBy: '再见，周游。'
        }
    })

v-pre

跳过这个元素和它的子元素编译的过程 . 可以用来显示原始Mustache 标签 . 天国大量没有指令的节点会加快编译

当你输入<span v-pre>{{msg}}</span>时 , 你可以看到{{msg}}

<span v-pre>{{msg}} </span>  显示出来的时 {{msg}}  而后面的{{msg}} 显示的则是Vue 中对应 的值

v-html

不仅可以渲染数据,而且还可以解析标签

 <div v-html='seyHi'></div>

渲染出来的是 '你好，周游。'

v-text

与胡子语法一致 , 可以渲染 , 但不能解析标签

<div v-text='seyHi'></div>

渲染出来的是'<h1><b> 你好，周游。 </b></h1>'

显示隐藏操作

v-show

v-show 的显示隐藏控制的是css的display属性

v-if 的显示隐藏是通过创建和销毁dom元素实现的

从性能上讲

v-show 性能更好而v-if 会造成性能浪费

什么时候使用 v-show 什么时候使用 v-if?

当你需要频繁切换一个元素的显示隐藏时 , 使用v-show

当你时一次性渲染元素并且再也不需要修改,那么两者都行

v-if

v-if 不仅可以用做显示隐藏还可以用来做判断

	<div id="app">
        <ul>
            <li v-if='score>=90'>优秀</li>
            <li v-else-if='score>=60'>及格</li>
            <li v-else>不及格</li>
        </ul>
    </div>
<!--因为下面score值为15 所以显示不及格 -->

 	new Vue({
        el: "#app",
        data: {
            score:15
        }
    })

v-on

为元素绑定事件可以直接在元素上 v-on:click='方法名称()' , 或者简写成 @click="方法名称()"

Vue.js的从入门到入土-01