框架系列之初学vue

初学前端框架—vue系列

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

二、使用步骤

1.HelloWorld

代码如下（示例）：
1.引入vue.js
2.编写相关代码

//开发环境版本，包含了有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        //挂载点
        el: "#app",
        //数据对象
        data: {
            message: "测试v-text"
            }
    });
</script>
<div id="app">
    //v-text:设置某个元素的text文本 会掩盖元素中的内容 支持插值表达式  
    <h1 v-text="message+'!!!'"> Hello</h1>
    //我们发现上面的v-text会将元素中的值全部替换，如果我们想要只替换一部分，就采用如下方式
    <h1>{{ message+"!!!" }} Hello</h1>
</div>

2.基本语法

1.v-text：显示文本值
2. v-html：显示HTML模块

3.v-bind：
v-bind 指令被用来响应地更新 HTML 属性
v-bind:href 可以缩写为 :href;

<div id="app2">
    //v-bind可以用‘:’简写 -->
    <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>
<script>
    //绑定元素
    var app2 = new Vue({
        el: '#app2',
        data: {
    	message: '页面加载于' + new Date().toLocaleString()
        }
    })
</script>

4.v-if和v-show：都可用于显示，隐藏元素
v-show 和 v-if的区别
v-show本质就是标签display设置为none，控制隐藏（性能较高）
v-if是动态的向DOM树内添加或者删除DOM元素

<div id="app3">
    <!-- v-if特点：每次都会从新删除或者创建元素 -->
    <!-- v-show特点：每次不会重新进行dom的删除或创建操作，只是切换了元素的display:none样式 -->
    
    <!-- v-if有较高的切换性能消耗 -->
    <!-- v-show有较高的初始渲染消耗 -->
    
    <!-- 如果涉及到频繁的切换，推荐使用v-show -->
    <!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用v-if -->
    <!-- v-on缩写为‘@’ -->
    <input type="button" value="flag" @click="seen = !seen" />
    <p v-if="seen">v-if</p>
    <p v-show="seen">v-show</p>
</div>
<script>
    //条件与循环
    var app3 = new Vue({
        el: '#app3',
        data: {
        	seen: true
        }
    })
</script>

5.v-model：

<!-- v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定 -->
<div id="app6">
    <p>{{message}}</p>
    <input placeholder="请输入文字!" v-model="message" />
</div>
<scipt>
    //v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
    var app6 = new Vue({
        el: '#app6',
        data: {
    	message: 'Hello World'
        }
    })
</script>

6.v-for：便利数组

<!-- v-for 指令可以绑定数组的数据来渲染一个项目列表： -->
<!-- v-for指令中in后面可以放普通数组，对象数组，对象，数字；放数字时是从1开始循环 -->
<!-- key在使用时，必须使用v-bind属性绑定的形式，指定key的值 -->
<div id="app4" style="width: auto;height: 300px;border:1px solid; padding: 5px;">
    <!-- 循环对象数组 -->
    <label>Id:<input type="text" v-model="id" /></label>
    <label>Text:<input type="text" v-model="text"/></label>
    <label><input type="button" value="添 加" @click="add"/></label>
    <p v-for="info in toods" v-bind:key="info.id">
        <input type="checkbox" />
        id:{{info.id}}---任务:{{info.text}}
    </p>
    //<p v-for="(value,key) in user">key是:{{key}}---value是:{{value}}</p> -->
    //迭代数字循环 -->
    //<p v-for="count in 10">这是第{{count}}次循环</p> -->
</div>
<script>
    //v-for 指令可以绑定数组的数据来渲染一个项目列表（循环）
    var app4 = new Vue({
        el: '#app4',
        data: {
        	//放置对象
        	// user: {
        	// 	id: 1,
        	// 	name: 'Tom',
        	// 	gender: 'boy'
        	// },
        	id:'',
        	text:'',
        	//对象数组
        	toods: [
        		{id: 1,text: '学习Vue'},
        		{id: 2,text: 'uni-app'},
        		{id: 3,text: '整个项目'}
        	]
        },
        methods:{
        	add(){
        		this.toods.unshift({id: this.id, text:this.text})
        	}
        }
    })
</script>

7.v-on：事务监听器

<!-- v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法 -->
<div id="app5">
    <p>{{message}}</p>
    <button v-on:click="resverMessage">反转消息</button>
</div>
<script>
    //v-on 指令
    var app5 = new Vue({
        el: '#app5',
        data: {
        	message: 'Hello Vue !'
        },
        methods: {
        	resverMessage: function() {
                     //toLocaleString()转译时间格式
                     alert(new Date().toLocaleString())
        	}
        }
    })
</script>

---

总结

以上适合于刚接触vue框架，本文仅仅简单介绍了vue初始使用和基本命令语法使用