序文
今日は10月1日国庆节、通りや路地を歩いていると、あたたかくお祝いの雰囲気がどこにでもあります在这一天祝愿祖国繁荣昌盛，越来越强大. 国慶節の休暇のため (土曜日にクラスがありました)、今日は退屈で、背景にあるプライベート メッセージを見て、非常によく似たメッセージを見ました。
私は本当にあなたの作品を読むのが好きで、いつも私と一緒にいることがとても幸せです. 今後もずっと見ていられるといいのですが. 更新しないと残念です.あなたのサポートと励ましにとても感謝しています. サポートは私の忍耐へのモチベーションです.
数日前、暇だったのでVueフレームワークを使ってtodoListのイベントメモをちょっと書いてみたのですが、なかなか面白いと思いました(温馨提示プロジェクトVue官网下载一个Vue框架文文件に後で導入する必要があります)。次のクラスでは、この古典的な小さなケースを分析します。
todoListイベントメモ
1.基本的な書き方
</head>
<body>
<ul>
<li>
14天核酸检测
</li>
<li>
9.3开学
</li>
<li>
开学第一课
</li>
</ul>
入力テキストボックス
ボタン ボタン
<button>提交</button>
2.実用的なアプリケーション開発
実際の開発では、私たちのデータとコンテンツは完全に書き出すことができないため、後でコンテンツを追加または変更するのに便利ですが、上記の方法を使用すると、この方法は非常に非効率的であることがわかります。新しいコンテンツを1つ追加する必要があります<li></li>标签.これは非常に面倒で効率的ではありません.対応する操作を達成するための効率的な方法はありますか? それはそうであることがわかりました。
コンテナ div を作成し、すべてのコンテンツを入れます。vue 自体はグローバルに有効ではありません。有効な位置を指定する必要があります
<div id="app">
<h1>{
{
title}}</h1>
<!-- 添加一个文本框 -->
<input type="text">
v-on 略語 @binding イベント命令は、ボタンがクリックされたときに add メソッドをトリガーします
<button @click="add()">提交</button>
v-for ループによって生成された構造体
(項目、インデックス) 配列内のコンテンツと、
ループの配列内のコンテンツに対応するインデックス値
<ul>
<li v-for="(item,index) in lists">
{
{
item}}
</li>
</ul>
</div>
3. vue プロジェクトを初期化する
<script>
</script>
// vue オブジェクトを作成します
// 変数を定義します
//リア Vue オブジェクトを保存するために使用されます
//data: array: [1,2,3]
同じ型の要素を配置します
//{ // key:value / /}//ループ処理では、最初にループするデータを対応する構造体に表示する必要があります //ページに配列を表示する方法: 補間式 { {} }
//送信ボタンにクリック イベントを追加します
let vm=new Vue({
//el:选项
el:"#app",//el绑定生效的区间
data:{
//本次需要哪些数据
lists:["14天核酸检测","开学9.3","开学第一课","专接本"],
title:"希望可以顺利开学"
},
methods:{
add(){
4.配列にコンテンツを追加し、対応する配列を見つける方法
//学校はスムーズに始まります！! !
//配列に直接追加してスムーズに学校を開始
//対応する配列を見つける方法は?
//このオブジェクト -> vue オブジェクト
//リスト
console.log(このリスト)
this.lists.push("顺利开学!!!")
// console.log(1)
}
}
})
5. TodoList イベントメモ ソースコード共有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>todoList</title>
<script src="js/vue221.js"></script>
</head>
<body>
<!-- 写一个容器div,将内容全部放入,vue本身不是全局生效,需要指定生效的位置 -->
<div id="app">
<h1>{
{
title}}</h1>
<!-- 添加一个文本框 -->
<input type="text">
<!-- v-on 简写 @绑定事件指令 点击button时触发 add方法 -->
<button @click="add()">提交</button>
<ul>
<!-- v-for 循环产生的结构
(item,index) 数组中内容和内容对应的索引值
in 循环的数组-->
<li v-for="(item,index) in lists">
{
{
item}}
</li>
</ul>
</div>
<!-- 初始化一个vue项目 -->
<script>
//创建一个vue对象
//let 定义一个变量
//用于保存 后方Vue对象
//数据: 数组:[1,2,3] 放置同样类型的元素
//{
// key:value
//}
//循环过程中 先要将循环的数据,显示对应的结构中
//数组如何显示到页面中： 插值表达式{
{}}
//给提交按钮添加一个点击事件
let vm=new Vue({
//el:选项
el:"#app",//el绑定生效的区间
data:{
//本次需要哪些数据
lists:["14天核酸检测","开学9.3","开学第一课","专接本"],
title:"希望可以顺利开学"
},
methods:{
add(){
//顺利开学！！！
//直接在数组中 追加 顺利开学
//如何找到对应的数组?
//this对象 -> vue对象
//lists
// console.log(this.lists)
this.lists.push("顺利开学!!!")
// console.log(1)
}
}
})
</script>
</body>
</html>
祖国の母に73歳の誕生日おめでとうを書きましょう！! !
6.祖国73歳の誕生日おめでとう
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>todoList</title>
<script src="js/vue221.js"></script>
</head>
<body>
<!-- 写一个容器div,将内容全部放入,vue本身不是全局生效,需要指定生效的位置 -->
<div id="app">
<h1>{
{
title}}</h1>
<!-- 添加一个文本框 -->
<input type="text">
<!-- v-on 简写 @绑定事件指令 点击button时触发 add方法 -->
<button @click="add()">提交</button>
<ul>
<!-- v-for 循环产生的结构
(item,index) 数组中内容和内容对应的索引值
in 循环的数组-->
<li v-for="(item,index) in lists">
{
{
item}}
</li>
</ul>
</div>
<!-- 初始化一个vue项目 -->
<script>
//创建一个vue对象
//let 定义一个变量
//用于保存 后方Vue对象
//数据: 数组:[1,2,3] 放置同样类型的元素
//{
// key:value
//}
//循环过程中 先要将循环的数据,显示对应的结构中
//数组如何显示到页面中： 插值表达式{
{}}
//给提交按钮添加一个点击事件
let vm=new Vue({
//el:选项
el:"#app",//el绑定生效的区间
data:{
//本次需要哪些数据
lists:["放假在家休息两天","去天安门广场看国庆升旗仪式","给祖国母亲写一份手抄报","看阅兵大典"],
title:"国庆节快乐"
},
methods:{
add(){
//顺利开学！！！
//直接在数组中 追加 顺利开学
//如何找到对应的数组?
//this对象 -> vue对象
//lists
// console.log(this.lists)
this.lists.push("祝祖国母亲七十三周年生日快乐!!!")
// console.log(1)
}
}
})
</script>
</body>
</html>