2022-10-21
第一个vue.js
<!doctype html>
<head>
<title>Document</title>
<!-- 开发环境 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script >
var app = new Vue({
el: '#app',
data:{
message:'Hello Vue!'
}
})
</script>
</html>
输出的是“Hello Vue!”。
注意：el:表示的是元素。写的时候一定要加“#”，如果没有加，那么输出的结果是“{{message}}”。
------------------------------------
data 数据：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<a href="javascript:vm">{{message}}</a>
<span>{{hello}}</span>
<hr>
<span>{{world}}</span>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
message:"领取优惠券",
hello:"hi en heng",
}
}}
</script>
</html>
----------------------
v-bind
使用实例：
<!doctype html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">戳我有惊喜</a>
<br>
<span v-bind:title="showmessage">鼠标放在这里</span>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
url:'http://www.baidu.com',
showmessage:'当前时间是:'+new Date().toLocaleString(),
}
})
</script>
</html>
说明：遇到的问题，运行的时候，超链接没有起作用，之后，发现的问题是，在script中没有添加“data”。之后将“data”添加上以后，将“url”和“showmessage”放入，超链接就可以起作用。
--------------------------------
2022-10-22
---------------------------------
v-if
使用实例
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
6 <title>Document</title>
7 </head>
8 <body>
9 <div id="app">
10 <span>{{message}}</span>
11 <hr>
12 <a href="#" v-if="isLogin">欢迎你归来</a>
13 <hr>
14 <a href="#" v-if="level===1">青铜</a>
15 <a href="#" v-else-if="level===2"></a>
16 <a href="3" v-else=>王者</a>
17 <hr>
18 <span v-id="seen">v-if</span>
19 <span display= none v-show="seen">v-show</span>
20 </div>
21 </body>
22 <script type="text/javascript">
23 var vm = new Vue({
24 el:'#app',
25 data:{
26 message:'hello',
27 isLogin:false,
28 level:1,
29 seen:true,
30 }
31 })
32 </script>
33 </html>
-------------------
v-for
实例
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
5 <title>Document</title>
6 </head>
7 <body>
8 <div id="app">
9 <span>{{message}}</span>
10
11 <hr>
12 <ul>
13 <li v-for="(item,index) in items ">{{index}} ~~~ {{item}}</li>
14 </ul>
15 <hr>
16 <ul>
17 <li v-for="(value,key) in object">{{key}} {{value}}</li>
18 </ul>
19 <hr>
20 <ul>
21 <li v-for="todo in todos">{{todo.title}}----{{todo.author}}</li>
22 </ul>
23 </div>
24 </body>
25 <script type="text/javascript">
26 var vm = new Vue({
27 el:'#app',
28 data:{
29 message:'hello',
30 items:['python','mysql','linux','html','css','js'],
31 object:{
32 title:'How to do lists in Vue',
33 author:'Jane Doe',
34 publishesAt:'2016-04-10',
35 },
36 todos:[
37 {
38 title:'Vue',
39 author:'Jane Doe',
40 publishedAt:'2016-04-10',
41 },
42 {
43 title:'python',
44 author:'Ricky',
45 publishedAt:'2019-04-10',
46 },
47
48 ]
49 }
50
51 })
52 </script>
53 </html>
说明：注意，在第36行往下，如果只是写“[title:'' ",author:" "]”,里面没有填写数据的时候，在浏览器中显示的只有“{{message}}”等等，不会显示内部的字符。
-----------------------------
methods方法：
使用实例
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
6 <title>Document</title>
7 </head>
8 <body>
9 <div id="app">
10 <span>{{message}}</span>
11 <button v-on:click="login">登陆</button><br>
12 <a href="javascript:;" @click="register">注册</a>
13
14 <hr>
15 <button @click="add(counter)">点击+1</button>
16 </div>
17 </body>
18 <script type="text/javascript">
19 var vm = new Vue({
20 el:'#app',
21 data:{
22 message:'hello',
23 counter:1,
24 total:0,
25 },
26 methods:{
27 login:function(){
28 alert('我被点击了')
29 },
30 register:function(){
31 alert('注册了')
32 },
33 add:function(counter){
34 this.total+=counter;
35 alert(this.total)
36 }
37 }
38 })
39 </script>
40 </html>
说明：上面是正确的代码，刚开始遇到的问题是，点击“登陆”后，没有弹窗，就很奇怪。之后，换了Vue文档中的代码，发现可以运行，那就是点击函数有问题，后来发现它拼写有误。正确的拼写是“alert”,而不是“alter”。一定要注意。
--------------------------------
v-model绑定事件
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
6 <title>Document</title>
7 </head>
8 <body>
9 <div id="app">
10 <span>{{message}}</span>
11 <hr>
12 <table>
13 <tr><td>用户名</td><td><input type="text" name="username" v-model="username"></td></tr>
14 <tr><td>密码</td><td><input type="password" name="password" v-model="password1"></td></tr>
15 <tr><td>确认密码</td><td><input type="password" name="password" v-model="password2"></td></tr>
16 <tr><td>性别</td>
17 <td>
18 男<input type="radio" name="sex" value="boy" v-model="sex">
19 女<input type="radio" name="sex" value="girl" v-model="sex">
20 </td>
21 </tr>
22 <tr>
23 <td>爱好</td>
24 <td>足球<input type="checkbox" name="like" value="足球" v-model="like"></td>
25 <td>篮球<input type="checkbox" name="like" value="篮球" v-model="like"></td>
26 <td>乒乓球<input type="checkbox" name="like" value="乒乓球" v-model="like"></td>
27 </tr>
28 </table>
29 <button v-on:click="register">注册</button>
30 </div>
31 </body>
32 <script type="text/javascript">
33 var vm = new Vue({
34 el:'#app',
35 data:{
36 message:'hello',
37 username:'',
38 password1:'',
39 password2:'',
40 sex:'',
41 like:[],
42 },
43 methods:{
44 register:function(){
45 alert(this.username + this.password1 + this.password1 + this.sex + this.like)
46 }
47 }
48 })
49 </script>
50 </html>
--------------------
todalist实例
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
6 <title>Document</title>
7 </head>
8 <body>
9 <div id="app">
10 <span>{{message}}</span>
11 <input type="text" name="todoitem" v-model="newitem"><button @click="add">添加</button>
12 <hr>
13 <ul>
14 <!-- <li v-for="item in items">{{item}}</li>-->
15 <li v-for="(item,index) in items">
16 <a href="javascript:;" @click="up(index)">↑</a>
17 {{item}} <a href="javascript:;" @click="deleteitem(index)">删除</a>
18 <a href="javascript:;" @click="down(index)">↓</a>
19 </li>
20 </ul>
21 </div>
22 </body>
23 <script>
24 var vm = new Vue({
25 el:'#app',
26 data:{
27 message:'hello',
28 items:['学习html','学习python','学习mysql'],
29 newitem:''
30 },
31 methods:{
32 add:function(){
33 this.items.push(this.newitem);
34 this.newitem='';
35 },
36 deleteitem:function(index){
37 this.items.splice(index,1);
38 },
39 down:function(index){
40 //1.获取当前的元素
41 current = this.items[index]
42 //2.先把当前元素删除
43 this.items.splice(index,1)
44 //3.再添加，添加的时候让它的索引减1
45 this.items.splice(index+1,0,current)
46 },
47 up:function(index){
48 //1.获取当前的元素
49 current = this.items[index]
50 //2.先把当前元素删除
51 this.items.splice(index,1)
52 //3.再添加，添加的时候让它的索引减1
53 this.items.splice(index-1,0,current)
54 }
55 }
56 })
57 </script>
58 </html>
说明：注意第34行，添加元素后，将文本框里面的内容设置为空，是“=”,不是“：”,如果写反了，结果就出不开。第36行中，删除的函数中要传递一个索引。第51行中，如果是删除一个元素，那么使用的参数有两个，处理“index”外，还有要删除的元素的个数。若删除一个那么第二个参数写上1。如果没有写参数的话，那么它就默认是删除除本身以外下面的所有。此处表示上移后，将下面的值都删除了。
标签：index,Vue,10,items,笔记,学习,message,data From： https://www.cnblogs.com/isDaHua/p/16814794.html