初识vue.js

什么是vue.js

  • vue.js是一套构建用户界面的渐进式框架。个人观点,目前大型项目前后端分离已成为趋势,vue采用自底向上增量开发设计,核心库只关注视图层,易于上手,还便于与第三方库或既有项目整合。

学习之前

  • 学习框架之前,需掌握html,css,javascript,计算机网络等知识。

起步

  • 新手不推荐直接使用vue-cli。推荐直接新建一个html文件,然后用<script>标签引入Vue。
    • <script src="https://unpkg.com/vue"></script>

声明式渲染

  • vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进dom的系统:

  • <!DOCTYPE html>
    <html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">
        <title>My first Vue app</title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
    <h3>samlpe1 声明式渲染</h3>
    <div id="app">
        {{ message }}
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
    </body>
    </html>
    
    • 2017-10-05 23-18-54屏幕截图.png
    • 浏览器打开输出Hello Vue!,这便是我们生成的第一个Vue应用!现在数据与DOM已经绑定在一起了,所有元素都是响应式的,按F12打开浏览器的控制台,修改app._data.message,会发现页面会做相应的改变。

      2017-10-05 23-18-54屏幕截图.png

vue.js指令

  • 指令带有前缀 v-,以表示他们是Vue提供的特殊属性,他们会在渲染的DOM上应用特殊的响应式行为。
  • v-bind:属性绑定指令。
  • v-if="bool":条件指令。
  • v-for="elem in Array":循环指令。
  • v-on:该指令可用来绑定一个事件监听器。
  • v-model:表单与应用之间双向绑定指令。

组件化应用构建

  • 类似angular的Component,vue也存在类似的组件系统,他允许我们使用小型、独立的可复用的组件构建大型应用。

  • 在Vue中注册组件:

    • Vue.component('todo-item'{
                      template:'<div>html 模板</div>'
                    })
      
    • 注册之后,可直接使用<todo-item></todo-item>标签使用该组件。

demo

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>My first Vue app</title>
    <script src="https://unpkg.com/vue"></script>

</head>
<body>
<h3>samlpe1 声明式渲染</h3>
<div id="app">
    {{ message }}
</div>






<h3>samlpe2 绑定DOM元素属性</h3>
<div id="app-2">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息!
    </span>
</div>
<h3>samlpe3 条件</h3>
<div id="app-3">
    <p v-if="seen">now you can look me</p >
</div>
<h3>samlpe4 循环</h3>
<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>
<h3>samlpe5 事件监听</h3>
<div id="app-5">
    <p>{{message5}}</p >
    <button v-on:click="reverseMessage">逆转信息</button>
</div>
<h3>samlpe6 表单与应用状态双向绑定</h3>
<div id="app-6">
    <p>{{message6}}</p >
    <input v-model="message6">
</div>
<h3>samlpe7 组件化应用构建</h3>
<div id="app-7">
    <ol>
        <!--
        现在我们为每个todo-item提供todo对象
        todo对象是变量,即内容可以是动态的。
        我们也需要为每个组件提供一个key。
        -->
        <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id"
        >
        </todo-item>
    </ol>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
    let app2 = new Vue({
        el:'#app-2',
        data:{
            message:'页面加载于 ' + new Date().toLocaleDateString()
        }
    });
    let app3 = new Vue({
       el:'#app-3',
       data:{
           seen:true
       }
    });
    let app4 = new Vue({
        el:'#app-4',
        data:{
            todos:[
                {text:'学习javascripts'},
                {text:'学习vue'},
                {text:'做个项目'}
            ]
        }
    });
    let app5 = new Vue({
        el:'#app-5',
        data:{
            message5:'hello vue.js'
        },
        methods:{
            reverseMessage: function () {
                this.message5 = this.message5.split('').reverse().join('');
            }
        }
    });
    let app6 = new Vue({
        el:'#app-6',
        data:{
            message6:'Hello world'
        }
    });
    Vue.component('todo-item' , {
        props:['todo'],
        template:'<li>{{todo.text}}'
    })
    let app7 = new Vue({
        el:'#app-7',
        data:{
            groceryList:[
                {id:0 , text:'蔬菜'},
                {id:1 , text:'奶酪'},
                {id:2 , text:'水果'},
            ]
        }
    })
</script>
</body>
</html>

参考资料

  • 文档!文档!文档!左转vue.js
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue.js官网教程学习笔记和学习摘要 起步 安装 一个简单的方法,直接把一个vue.js引入你的HTML页面中,...
    恰皮阅读 3,402评论 2 22
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,245评论 0 6
  • 大学毕了业之后,七七八八的节日就冷淡多了。双11也只是网上的狂欢罢了,自己对着电脑手机孤独地战斗。圣诞节可能就是一...
    萱草生堂阶阅读 699评论 0 0
  • 1、【《当我内心足够强大》 当我内心足够强大 你指责我 我感受到你的受伤 你讨好我 我看到你需要认可 你超理智 我...
    youyeath阅读 396评论 0 1