vue.js 基础知识看点

时间 2019-11-11

标签 vue.js vue 基础知识栏目 JavaScript 繁體版

原文原文链接

特色

易用html

已经会了HTML,CSS,JavaScript?即刻阅读指南开始构建应用。vue

灵活jquery

简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。ajax

性能json

20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。浏览器

数据简单的绑定以及条件判断和循环

这里最基础的一些数据绑定也是 MVVM的一些基础内容大部分来自官网教程app

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<title></title>
	</head>
	<body>

	<div id="app">

		<br />
		<!--使用模板语法绑定 -->
		{{ message1 }}
		
		<br />

		<!-- 双向绑定 -->
		<input v-model="message1"> 修改这个值 查看双向绑定
		<br />

		<!--元素属性方式绑定 v-bind -->
		<span v-bind:title="message2">
			鼠标悬停几秒钟查看此处动态绑定的提示信息！
		</span>
		<br />

		<!--条件 v-if -->
		<p v-if="show">你看到我了</p>
		<br />

		<!--循环 v-for -->
		<li v-for="todo in todos">
		{{ todo.text }}
		</li>


	</div>

	<br />
	<a href="index.html">返回</a>

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message1: 'Hello Vue!',
				message2: '页面加载于 ' + new Date().toLocaleString(),
				show:true,
				todos: [
					{ text: '学习 TypeScript' },
					{ text: '学习 Avalon' },
					{ text: '学习 Vue' }
				]
			}
		})
	</script>
	</body>
</html>

咱们已经生成了第一个 Vue 应用程序！这看起来和渲染一个字符串模板很是相似，可是 Vue 在背后作了大量工做。如今数据和 DOM 已经被关联在一块儿，全部的数据和 DOM 都是响应式的。咱们如何对这一切清晰领会？只需打开你的浏览器的 JavaScript 控制台（如今，就在当前页面打开），而后设置 app.message1 的值，你将看到上面的示例所渲染的 DOM 元素会相应地更新。性能

响应用户来自的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<title></title>
	</head>
	<body>

	<div id="app">
        <p>{{ icount }}</p>
		<button v-on:click="showCount">显示数量</button>
		<br />
		<button v-on:click="showTag('click element ==> ', $event)">传递参数</button>
		<br />
		<input v-on:keyup="showKey"> 输入一些东西试试
		<!--
		<input v-on:keyup.Enter="showKey"> 只接受回车键
		//-->
	</div>

	<br />

	<br />
	<a href="index.html">返回</a>

	<script>
		var app = new Vue({
			el: '#app',
			data: {
				icount: 0,
			},
            methods: {
                showCount: function () {
                    this.icount++;
				},
				showTag: function(message,event){
					var name = event.target.tagName;
					alert(message+name);
				},
				showKey:function(event){
					alert(event.key);
				}
            }
		})
	</script>
	</body>
</html>

选择框常常用到的例子

这里简单的使用jquery获取json数据展现在选择框上, 以及修改选择内容时的数据变化控制学习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="js/jquery.js"></script>
		<title></title>
	</head>
	<body>

	<div id="app">
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option">
                {{ option.name }}
            </option>
        </select>
        <span>Selected: {{ selected.name }}</span>
	</div>

	<br />

	<br />
	<a href="index.html">返回</a>

	<script>

		var app = new Vue({
			el: '#app',
			data: {
                selected: {},
                options:[]
            },
            watch:{
                'selected.value':function(newVal, oldVal){
                        alert("new Value is "+ newVal +"; old Value is"+oldVal);
                },
                selected:function(newVal, oldVal){
                    console.info("new Text is "+ newVal.name +"; old Text is"+oldVal.name);
                }
            }
            
        });
        app.$watch("selected.text",function(newVal,oldVal){
            console.log("写在外部的==>"+newVal);
        });

        $.ajax({
            url:'data/list.json',
            type:'get',
            //data:{},
            dataType:'json',
            success:function(data,state,response){
                if(response.status==200){
                    if(data.Code==200){
                        app.options=data.Response;
                    }else{
                        alert('request err');
                    }
                }else{
                    alert('server err');
                }
            }
        });
	</script>
	</body>
</html>

生命周期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<title></title>
	</head>
	<body>
        <div id="app">
            {{message}}
        </div>
        <script>
        var app = new Vue({
            el:"#app",
            data:{message:"hello"},
            beforeCreate:function(){
                console.log('================= beforeCreate');
            },
            created: function () {
                console.log('================= created');
            },
            beforeMount: function () {
                console.log('================= beforeMount');
            },
            mounted: function () {
                console.log('================= mounted');
                this.message = "修改message的值,执行update相关方法";
            },
            beforeUpdate: function () {
                console.log('================= beforeUpdate');
            },
            updated: function () {
                console.log('================= updated');
            },
            beforeDestory: function () {
                console.log('================= beforeDestory');
            },
            destoryed: function () {
                console.log('================= destoryed');
            }
        });
        </script>
	</body>
</html>

vue.js 组件的简单使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<title></title>
	</head>
	<body>

		<div id="example">
			<my-header></my-header>
			<my-body v-bind:message="message"></my-body>
			<my-footer></my-footer>
		</div>

		<a href="index.html">Back</a>

		<script>
		Vue.component('my-header', {
			template: '<div>the head</div>'
		})
		Vue.component('my-body', {
			// 声明 props
			props: ['message'],
			// 就像 data 同样，prop 能够在组件模板内部使用，
			// 而且，还能够在 vm 实例中经过 this.message 访问
			template: '<div>{{ message }}</div>'
		  })
		Vue.component('my-footer', {
			template: '<div>the footer!</div>'
		})

		

		// 建立一个根实例
		new Vue({
			el: '#example',
			data:{
				message:"It is body"
			}
		})
		</script>
	</body>
</html>