前端:Vue.js起步

作者: 朱芮林 | 来源:发表于2019-03-10 13:07 被阅读0次

前端:Vue.js起步
Vue.js
前端学习大概内容
学习vue (1)
Vue起步
【前端】Vue.js 基础篇（下）
计算机毕业设计Python+Spark+LSTM中药推荐系统中
初识Vue
Vue.js 的学习笔记（1）
Vue.js 起步

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

尝试 Vue.js 最简单的方法是使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

第一种：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

第一个起步Vue.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>v-bind练习</title>
        <!-- 通过CDN引入Vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <!-- vue-app的根容器 -->
        <div id="app">
            <h2>{{message}}</h2>
        </div>
        <script type="text/javascript">
            // 实例化一个Vue对象
            var app = new Vue({
                el: '#app',
                data:{
                    message:'hello Vue!'
                    }
                    
            })
        </script>
    </body>
</html>

效果图

v-bind：数据的双向绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>v-bind练习</title>
        <!-- 通过CDN引入Vue.js -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <!-- vue-app的根容器 -->
        <div id="app">
            <p>姓名:{{name}}</p>
            <input type="text" v-bind:value="description" />
            <a v-bind:href="url">{{website}}</a>
            <img :src="avatar" />
        </div>
        <script type="text/javascript">
            // 实例化一个Vue对象
            var app = new Vue({
                el: '#app',
                data:{
                    name:'尤雨溪',
                    description:'Vue.js的创立者',
                    website:'Vue.js官网',
                    url:'http://cn.vuejs.org',
                    avatar:'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=c08a0c60a844ad342ebf8081e8996bc9/4afbfbedab64034f29596c8ba6c379310b551da2.jpg'
                }
            })
        </script>
    </body>
</html>

效果图

条件渲染指令： v-if、v-else-if、v-else：可以根据表达式的值在DOM中渲染或销毁元素/组件,与v-show不同的是，v-if是真正的条件渲染，适合条件不经常变更的场景；而v-show只是简单的CSS属性切换，使用于频繁切换条件。
列表渲染指令：v-for：当需要将一个数组遍历或枚举一个对象循环显示时，会用到列表渲染指令v-for，结合in来使用

实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue.js条件和循环的综合练习</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style type="text/css">
            .container{
                display:flex;
                width: 80%;
                margin:0 auto;
            }
            .card{
                width: 300px;
                height: 300px;
                margin-right: 30px;
                border: 1px solid #EEEEEE;
                border-radius: 10px;
            }
            .card img{
                width:100%;
                height: 100%;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius:10px ;
            }
            .p1{
                color: #00FFFF;
                
            }
            .p2{
                color: crimson;
            }
            
        </style>
    </head>
    <body>
        <div id="app">
            <h2 v-show="show">显示图书信息</h2>
            <div class="container">
                <!-- 通过循环遍历books数组 -->
                <div class="card" v-for="book in books">
                    <!-- 显示图书的名称 -->
                    <h4>{{book.name}}</h4>
                    <!-- 绑定图书的封面属性 -->
                    <img :src="book.cover" >
                    <!-- 判定like的值,显示不同的文字 -->
                    <p v-if="book.like" class="p1">喜欢</p>
                    <p v-else class="p2">不喜欢</p>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                
                data:{
                    show:true,
                    books:[
                        {
                            name:'玉森画廊的客人',
                            cover:'img/s29987299.jpg',
                            like:true
                        },
                        {
                            name:'南腔北调',
                            cover:'img/s29987983.jpg',
                            like:false
                        },
                        {
                            name:'沙丁鱼罐头之味',
                            cover:'img/s29998459.jpg',
                            like:false
                        },
                        {
                            name:'觉醒众神',
                            cover:'img/s30013784.jpg',
                            like:true
                        }
                        
                    ]
                }
            })
        </script>
    </body>
</html>

效果图