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>