Vue.js的小白学习之路

最新推荐文章于 2023-08-09 00:42:27 发布

YuFengxxx

最新推荐文章于 2023-08-09 00:42:27 发布

阅读量356

点赞数 1

分类专栏： Vue summary 文章标签： Vue summary

本文链接：https://blog.csdn.net/chris_xyf/article/details/81226468

版权

summary 同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

Vue

2 篇文章 0 订阅

订阅专栏

暑假留校学习很快就要一周了，这一周主要学习了JavaScript的面向对象及Ajax的使用和Json的基本语法操作。

最让我开心的是，接触了js的第一个框架——Vue.js，对于小白入门的我来说，第一次接触前端框架简直是新奇，惊喜！

小白之路

开始学习vue可以搭建环境，也可以简单直接引用script，因为是入门，所以我采用的是直接引用的方法。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 放入程序即可。

vue 第一个vue实例

一切都是从"Hello World"开始！

<!DOCTYPE html>
<html>
<head>
	<title>vue demo</title>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		{{message}}
	</div>

<script type="text/javascript">
	var app=new Vue({
		el:'#app',
		data:{
			message:'Hello World!'

		}
	})
</script>
</body>
</html>

我们先创建一个id为app的div，之后便在JavaScript代码中添加vue的片段.

每个 Vue 应用都是通过用Vue函数创建一个新的 Vue 实例开始的,里面el 定义的是要操做的id名称，之后创建data对象，在里面插入属性及其值。

而文本显示用的是数据绑定，最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：{{message}}.

这样，我们第一个Vue的实例就完成了。运行结果，自然就是一切美好的开端："Hello world"

Vue常用基础指令

之后，我学习了叫Vue常用的指令：v-if,v-else（条件判断） v-for（循环）, v-on（事件绑定）, v-model（内容绑定）, v-text, v-html（内容显示的区别）, v-bind（属性绑定）, 及 v-pre,v-cloak,v-once（一些特殊情况）

不得不说，这些指令虽然简单，但是效果却非同凡响，让人十分惊喜，渲染效果十分强大。而且 Vue的入门对于初学者来说十分友好，简单易上手，初次接触框架，我觉得是十分不错的选择。

Vue 简单的代码

1.v-model 实例：

<!DOCTYPE html>
<html>

<head>
    <title>vue demo</title>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>绑定文本框</h3>
        <p>原始文本信息：{{message}}</p>
        <p>v-model:
            <input type="text" name="" id="" v-model="message">
        </p>
        <p>v-model.lazy:
            <input type="text" name="" id="" v-model.lazy="message">
        </p>
        <p>v-model.number:
            <input type="text" name="" id="" v-model.number="message">
            <p>v-model.trim:
                <input type="text" name="" id="" v-model.trim="message">
                <hr>
                <h3>绑定文本域</h3>
                <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
                <hr>
                <h3>绑定一个之值</h3>
                <input type="checkbox" id="isTrue" v-model="isTrue">
                <label for="isTrue">{{isTrue}}</label>
                <hr>
                <h3>绑定多个值</h3>
                <input type="checkbox" id="chris" value="chris" v-model="webName">
                <label for="chris">chris</label>
                <input type="checkbox" id="Alan" value="Alan" v-model="webName">
                <label for="Alan">Alan</label>
                <input type="checkbox" id="james" value="james" v-model="webName">
                <label for="james">james</label>
                <p>您选中的人：{{webName}}</p>
                <hr>
                <h3>单选框绑定</h3>
                <input type="radio" id="one" value="男" v-model="sex">
                <label for="one">男</label>
                <input type="radio" id="two" value="女" v-model="sex">
                <label for="two">女</label>
                <p>您选择的是：{{sex}}</p>

    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello world!',
                isTrue: true,
                webName: [],
                sex: "男"

            }
        })
    </script>
</body>

</html>

2.v-for实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue demo2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
        <div id="app">
                <ul>
                    <li v-for="item in sortNum">
                        {{item}}
                    </li>
                </ul>
                <hr>
                <ul>
                    <li v-for="(student,index) in sortStu">
                        {{index}}:{{student.name}}-{{student.age}}
                    </li>
                </ul>
            </div>
        
        <script type="text/javascript">
            var app=new Vue({
                el:'#app',
                data:{
                   num:[22,1,55,33,23,63,65],
                   stu:[
                       {name:'summer',age:22},
                       {name:'Chris',age:17},
                       {name:'Alan',age:13},
                       {name:'coke',age:25}
                   ]
                },
                computed:{
                    sortNum:function(){
                        return this.num.sort(sortNumb);     
                    },
                    sortStu:function(){
                        return sortS(this.stu,'age');
                    }
                }});
                function sortNumb(a,b){
                    return a-b
                };
                function sortS(array,key){
                    return array.sort(function(a,b){
                        var x=a[key];
                        var y=b[key];
                        return (x<y)?-1:((x>y)?1:0);
                    });

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

之后，还是继续努力吧，士不可以不弘毅，任重而道远！

YuFengxxx

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue.js的小白学习之路

暑假留校学习很快就要一周了，这一周主要学习了JavaScript的面向对象及Ajax的使用和Json的基本语法操作。最让我开心的是，接触了js的第一个框架——Vue.js，对于小白入门的我来说，第一次接触前端框架简直是新奇，惊喜！小白之路开始学习vue可以搭建环境，也可以简单直接引用script，因为是入门，所以我采用的是直接引用的方法。&lt;script ...
复制链接

扫一扫

专栏目录