html 代码
- <!doctype html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
- <script type="text/javascript" src = "https://unpkg.com/vue"></script>
- <style type="text/CSS">
- *{
- margin: 0;
- padding: 0;
- }
- #app{
- background-color: #333;
- }
- #main{
- width: 1000px;
- margin: 0 auto;
- color: white;
- padding: 10px;
- }
- #main>div{
- background-color: white;
- color: #666;
- margin-bottom: 20px;
- }
- h5{
- margin-top: 10px;
- }
- .red{
- color: red;
- }
- .size{
- font-size: 32px;
- }
- [v-cloak]{
- display: none;
- }
- #outer{
- width: 200px;
- height: 200px;
- border: 2px solid black;
- display: flex;
- }
- #inner{
- width: 100px;
- height: 100px;
- margin: auto;
- border: solid 2px black;
- }
- </style>
- </head>
- <body>
- <div id = "app" v-cloak>
- <div id = "main">
- <h3 > 插值 </h3>
- <!-- {{变量 | 表达式}} -->
- <div>
我今年 {{age}}, 我叫{{name}}, 我哥哥打我五岁, 他今年{{age+5}} 岁.
- </div>
- <h3 > 指令 </h3>
- <div>
- <h5>v-text 指令</h5>
- <p v-text="text"></p>
- <p v-text="text.toUpperCase()"></p>
- <p v-text="'<span>html 测试</span>'"></p>
- <h5>v-html 指令</h5>
- <p v-html="htmlStr"><span > 原内容</span></p>
- <h5>v-show 指令</h5>
- <p v-show="show">你看不看得见我!!!</p>
- <h5>v-if 系列指令</h5>
- <p v-if = "age<16">我今年{{age}}, 我还是个孩子</p>
- <p v-else-if="age>=16 && age<22">我今年{{age}}, 我已经是个青年了!</p>
- <p v-else= "age>=22">我今年{{age}}, 我已经成年了!</p>
- <h5>v-for 指令</h5>
- <ul>
- <li v-for="item in list">{{item}}</li>
- </ul>
- <p><span v-for="(item, index) in person">{{index +":"+item}}</span></p>
- <p><span v-for="(item, index) in'abcd'">{{index +":"+item}}</span></p>
- <p><span v-for="item in 10">{{item}}</span></p>
- <!-- template -->
- <template v-for="item in list2">
- <h5>{{item.type}}</h5>
- <ul>
- <li v-for="n in item.list">{{n}}</li>
- </ul>
- </template>
- <h5>v-bind</h5>
- <p v-bind:class="'red'">v-bind 指令练习</p>
- <p v-bind:class="className">v-bind 指令练习 2</p>
- <p v-bind:class="{red: isRed}">v-bind 指令练习 3</p>
- <p v-bind:class="{red: isRed, size: isSize}">v-bind 指令练习 4</p>
- <p v-bind:class="[className2, {'size': isSize}]">v-bind 指令练习 5</p>
- <!-- v-bind: 简写为 ":" -->
- <p :style="{fontSize: size+'px', color:'hotpink'}">v-bind 指令练习 6</p>
- <p :index = "'200'">自定义属性</p>
- <h5>v-pre 指令</h5>
- <!-- 跳过该标签及其下属标签的解析 -->
- <p v-pre>{{name}}</p>
- <h5>v-cloak</h5>
- <!-- 该指令在编译后自动删除 -->
- <p v-cloak>
- <span>{{name}}</span><span>{{name}}</span><span>{{name}}</span><span>{{name}}</span>
- </p>
- <h5>v-once 指令</h5>
- <p v-once>{{name}}</p>
- <h5>v-on: 指令 缩写为 "@"</h5>
- <div id = "outer" @click.native="clickOuter">
- <div id = "inner" v-on:click.self="clickInner">
- <a v-text = "num" @click.once="num++"></a>
- </div>
- </div>
- 留言: <input type = "text" id="msg">
- <input type = "button" @click="addMsg" value="提交">
- <ul>
- <li v-for="(item, index) in msgList">
- {{item}}
- <span @click="delMsg(index, $event)">删除</span>
- </li>
- </ul>
- <h5>v-model 指令</h5>
- 姓名:<input type = "text" v-model.lazy.number.trim="name"><br>
爱好: 足球 < input type = "checkbox" v-model="checkList" value="footBall">
唱歌 < input type = "checkbox" v-model="checkList" value="singing">
读书 < input type = "checkbox" v-model="checkList" value="reading">
<span>{{checkList.length>0? checkList.join(): ""}}</span><br>
性别: 男 < input type = "radio" v-model="sexCode" value="0">
女 < input type = "radio" v-model="sexCode" value="1"><br>
城市:<select v-model="city" multiple>
- <option disabled value="">请选择</option>
- <option value="001">北京</option>
- <option value="002">天津</option>
- <option value="003">上海</option>
- </select><span>{{city}}</span>
- </div>
- </div>
- </div>
- </body>
- <script type="text/javascript">
- // 创建第一个 vue 实例
- var vue = new Vue({
- // 设置挂载节点, 不能挂载到 body 上.
- el: "#app",
- // 数据
- data: {
- name: "tom",
- age: 28,
- text: "hello vue !",
- htmlStr: `<select>
- <option > 男</option>
- <option > 女</option>
- </select>`,
- show: true,
- list: ["白菜", "豆芽", "土豆"],
- person: {
- name: "张三",
- age: 18
- },
- list2: [{type: "蔬菜", list: ["白菜", "土豆"]}, {type: "肉", list: ["猪肉", "鸡肉"]}],
- className: "red size",
- isRed: true,
- isSize: false,
- className2: "red",
- size: 32,
- num: 0,
- msgList: ["hello kugou!"],
- checkList: ["singing"],
- sexCode: "0",
- city: []
- },
- // 方法集合
- methods: {
- clickInner: function(e){
- //this 表示 Vue 实例
- console.log(this === vue);
- console.log(e);
- var target = e.currentTarget.style.backgroundColor = "pink";
- },
- clickOuter(e){
- console.log(this);
- e.currentTarget.style.backgroundColor = "skyblue";
- },
- addMsg(e){
- var input = document.getElementById("msg");
- if(input.value.length> 0){
- this.msgList.push(input.value);
- input.value = "";
- }
- },
- delMsg(index, e){
- console.log(index);
- console.log(e);
- this.msgList.splice(index, 1);
- }
- }
- });
- </script>
- </html>
来源: http://www.qdfuns.com/article/32149/d2d05e62c0c745718fd66843b6b0e916.html