腾讯课堂之Vue 学习

最新推荐文章于 2024-05-15 02:14:30 发布

铛铛铛铛Huan

最新推荐文章于 2024-05-15 02:14:30 发布

阅读量883

点赞数

分类专栏： JavaScript 文章标签： Vue.js javascript

本文链接：https://blog.csdn.net/u010046318/article/details/70233663

版权

JavaScript 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

前两天开始学习Vue开发之路，腾讯课堂推出的，只有十天，感觉这是一次不错的机会。所以在自己js水平还一般的情况下，还是选择了学习Vue，当然，基础还是最重要的。

第一节：

什么是Vue？

Vue 就是数据驱动的渐进式 JavaScript框架。

如何理解数据驱动？其实就是利用数据来渲染页面，数据的改变直接会影响页面的呈现；

如何理解渐进式？其实就是你用Vue 可以只用它最简单的功能，也可以利用组件，按需来用，当你想实现的效果不需要用复杂的组件时，就只用简单声明式渲染即可。

Vue 如何来用？

可以安装Vue开发环境，也可以引入CDN上的Vue.js。

为了简单起见，而且现阶段只是用Vue来实现小页面，不涉及项目，因此我是引入Vue,js的方式。

引入Vue,js之后，如何去利用Vue来实现数据驱动页面的渲染呢？

首先，需要创建一个Vue实例

<script>
    var v = new Vue({
        el :  (挂载点) ,             
       data: （数据，对象，也可以是数组）,
       method: (方法，可以是数组)
    })
</script>

处在挂载点之内的模板，都可以与Vue实例中的数据进行的绑定。也就是说，在挂载点之内的元素都可用Vue实例里面的数据。

那么什么是模板呢？

最简单的，模板与我们平时写的HTML页面没什么两样。

还有一种是，字符串模板，即在 Vue实例中，template :str；就可以声明一个模板；

最后一种，也是最原生的一种，render函数，最终会由render函数中的creatElement()函数来创建标签，得到整个的模板。

写个简单的例子：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>           //引入vue.js
        <div id="demo">
    		<!-- <input type="text" :value = 'message' /> -->
    		<input type="text" v-model = 'message' />
    		<p>输入框的内容为:{{message}}</p>
    	</div>
        <script>
        	var data = {
        		message: 'Hello, Vue.js!'
        	}

        	//创建一个Vue实例
        	var v = new Vue({
        		el: '#demo',      //绑定的元素,挂载元素
        		data: data        //绑定数据
        	})
        </script>
    </head>
    <body>
    </body>
</html>