vue入门 0 小demo (挂载点、模板)
用直接的引用vue.js
首先 讲几个基本的概念
1、挂载点即el：vue 实例化时 元素挂靠的地方。
2.模板 即template：vue 实例化时挂载点 下赋值的模板。
3.赋值时 的符号 有 插值表达式 {{msg}} 、 v-text="msg" 、v-html="msg" 类似于css 的写法
4.实例 即数据：data:{msg:'hello world!'}
4.事件表示：v-on:click="handleclick" ，vue 指令点击时的方法handleclick， v-on:click 简写@click
methods: { handleclick:function () { this.msg='world';} }
5. 属性绑定 v-bind 简写:bind or : v-bind:title="title1"
下面为代码
效果为：显示 hello world ,点击时 变为world
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/vuejs/vue.js"></script> </head>
<body>
<div id="app"> <!--挂载点-->
<!-- <p>{{msg}}</p> --><!--模板--> <!--{{msg}} 为插值表达式 == v-text='msg' v-html="msg"-->
<!-- <p v-text="msg"></p> -->
<!-- <p v-html="msg"></p> -->
<div v-on:click="handleclick">{{msg}}</div>
</div>
</body>
<script>
new Vue({
el:'#app',
// template:'<p>{{msg}}</p>',
data:{
msg:'hello world!'
},
methods: {
handleclick:function () {
this.msg='world';
}
},
});
</script>
</html>
02属性和双向绑定
知识点：v-bind:title 、v-model
显示效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/vuejs/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <div title="this is hello world">{{msg}}</div> -->
<!-- <div title="this is hello world">{{msg}}</div> -->
<div v-bind:title="title1">{{msg}}</div> <!--数据项属性绑定 :bind=v-bind: -->
<div :title="title">{{msg}}</div> <!--数据项属性绑定 :bind=v-bind: -->
<input v-model="content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({
el:'#app',
template:'',
data:{
msg:'hello world',
title1:'this is hello world',
content:'世界你好！'
},
methods: {
},
});
</script>
</body>
</html>