1. 知識ポイントを理解する:
フロントエンドとバックエンドとは？
フロントエンド：データ表示
バックエンド: データ処理
依存関係はどこから来るのか?
npm管理
外国では npm サーバーのダウンロードが非常に遅い
タオバオ ミラー: npm i -g cnpm --registry=https://registry.npm.taobao.org
jquery:
1.cd ダウンロードしたいフォルダへ
2. npm init -y を初期化します
3. npm install --save jquery をダウンロードします
4. ダウンロードしたバージョンを修正する
4-1 ダウンロード時にバージョンを直接指定する npm install --save jquery@version number
4-2 プロジェクトのpackage.jsonファイルを修正し、プロジェクト配下のnpm installで再ダウンロードできる
フレームとは？
ビジネスに関係のないコード ブロック
ビジネス: プロジェクトの機能です
フレームワークの長所と短所
プロジェクトの複雑さを簡素化し、プロジェクトの価値を高める
短所: 新しい文法を学ばなければならない
html 属性とは何ですか?
コンセプト: htmlタグの機能拡張
構文: htmlの開始タグに属性を記述する attribute = "attribute value" 複数の属性はスペースで区切る
2. 知識のポイント:
ビュー：
コンセプト: vue.js は最も主流のフロントエンド MVVM フレームワーク (データを表示しやすい)
3. 覚えておくべき知識のポイント:
MVVMとは？
M型モデル-----」データ
V Viewビュー-----「ユーザーが見ることができるインターフェース
Vm ViewModel ビュー モデル ----- 「データと表示を分離し、ビューとモデルの間のブリッジを使用して関連付けます。
{ {}} とは何ですか?
{
{}} テンプレート構文 / 二重中括弧式 / 二重中括弧代入方法
{
{ 式 }} 式 —" 計算によって結果を取得できる式
レンダリング カテゴリ:
1. vue の核心は、シンプルで簡潔なテンプレート構文を使用してデータを宣言的に表示することです。
2. ネイティブ js: 命令型レンダリング プログラムを順序付ける必要があります。ステップごとにどのように進めるか 3.
Vue フレームワーク: 宣言型レンダリング。実行したいことをプログラムに伝えるだけでよく、それは自動的に実行されます。
命令
1.命令の概念: v- で始まる html の特別な属性です。
2.命令の機能は何ですか?
: vue 3で html タグの機能を拡張します。命令構文: html の開始タグと v-instruction = "instruction value" に記述します。複数の命令はスペースで区切ります。
4. v-model 命令は、双方向バインディングの原理を実現します。双方向バインディングは、データ ハイジャックとパブリッシャー サブスクライバー モードによって実現されます。
データ ハイジャック: データ インターセプト データ インターセプトとは、vm レイヤーが常にリスナー モデルとビューのデータを監視することを意味します. そのうちの 1 つが変更されると、vm レイヤーは通知を受け取ります (データ ハイジャック オブジェクトを介して vm が通知を受け取る方法. defineProperty( ) バインドされたオブジェクト データをインターセプトし、getter メソッドと setter メソッドを使用してそれを読み取り、変更できます)。
パブリッシャー - サブスクライバー: 1 対多の関係です。
コードエリア:
No.1 ハローワード
<!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>Document</title>
</head>
<body>
<!-- 1.创建v层-->
<div id="demoDiv">
{
{
text}}
</div>
</body>
</html>
//这里是下载vue依赖包引入vue.js包
<script src=”node modules/vue/dist/vue .min.js"></script>
<script>
// 2.创建vm层就是new出来的实例
new Vue({
//m层
data:{
text:'么么哒'
};
el : " #demoDiv'
})
/script>
no.2语法
<! DOCTYPE htm1>
<html lang= "en">
<head>
<meta charset="UTF-8">
<meta http- equiv="X- UA-Compatible" content=" IE=edge" >
<meta name= "vi ewport" content= "width=device-width, initial-scale=1.0">
<title>Document</title>
/head>
<body>
<!-- 1.创建v层- - >
<div id="demoDiv">
<h1>{
{
arr[2]}}</h1>
<h1>{
{
age+15}}</h1>
<h1> {
{
we . uesra}}</h1>
<h1> {
{
we . uesrb}}</h1>
</div>
/body>
</html>
<script src="./node_ modules/vue/dist/vue .min. js"></script>
<script>
//2.创建vm层就是实例层
new Vue({
data:{
name: Zz，
age:18,
we:{
uesra:' 1212'
uesrb: '33 '
}，
arr:[1111 ,222222 ,3333333，44444 ]
},
el:' #demoDiv'
})
</script>
no.3v-show コマンド
役割: 要素の表示と非表示を制御します
css display を使用して css
true display false hideを設定します
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF- 8">
<meta http-equiv="X-UA-Compatible" content= ”IE=edge" >
<meta name= "vi ewport" content="width=device - width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id=" demoDiv">
<h1>V- show</h1>
<h1 v- show=” bool' >看我显示隐藏</h1>
</div>
</body>
</html>
<script src=" node_ modules/vue/dist/vue .min. js"></script>
<script>
new Vue({
data:{
bool:false
el: ' #demoDiv '
})
</script>
no.4v-モデル命令
1.フォーム要素上のデータの双方向バインディングに使用されます;
2. v-model はビューとモデル間の双方向バインディングを実現します;
3. v-model はフォーム上の双方向バインディングのみを実現できます;
4. モデル5.ビュー データが
変更されると、モデル データも変更されます。
<! 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>Document</title>
</head>
<body>
<div id=" demoDiv">
<input type="text" v- model=' text1'>
<h1>v - model</h1>
<p><h1>{
{
text1}}</h1></p>
</div>
body>
/html>
<script src="node_ modules/vue/dist/vue， min. js"></script>
<script>
new Vue({
data:{
text1:'么么哒'
},
el:' #demoDiv'
})
</script >
no.5v-show \v-model 小さな演習
<!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>Document< /title>
</head>
<body>
<div id="demoDiv">
<input type=" checkbox" v - model=”bool '><p v- show= ' bool'>{
{boo1?'有我: '没我'}}</p>
<p>{
{
boo1}}</p>
<h1 v- show= ' bool '>显示隐藏</h1>
</div>
</body>
</html>
<script src=" . /node_ modules/vue/dist/vue .min. js"></script> 4
<script>
new Vue({
data:{
bool:false
},
el: ' #demoDiv '
})
</script>
no.6 v-on命令
vue でイベントをバインドするための命令です (イベントは vue で直接使用できず、使用するには v-on で変更する必要があります)。
<!DOCTYPE htm1>
<html lang= "en">
<head>
<meta charset="UTF-8">
<meta http- equiv="X-UA- Compatible" content="IE=edge">
<meta name= "vi ewport" content= "width=device-width, initial-scale=1.0">
<title>Document</title>
:/head>
<body>
<div id="demoDiv">
<h1>v-on</h1>
<button v- on :click=' fun()'>点击我打印</button)
<button @click=fun()>点击我打印</button
</div>
</body>
</html>
<script src=" ./node modules/vue/dist/vue .min. js"></script>
<script>
new Vue({
data:{
},
el: ' #demoDiv '
//函数要写在data,与e1同级位置，并用methods表达
methods: {
fun(){
console. log('你好' )
})
</script >
no.7 v-show\v-on\ v-model 小演習
<!DOCTYPE html>
<html lang= "en" >
<head>
kmeta charset="UTF-8">
<meta http- equiv="X-UA- Compatible" content=" IE=edge" >
<meta name= "viewport" content="width=device - width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="demoDiv">
<h1 @click=' fun()'>{
{
tex}}</h1>
<input type= "text" v-model= ' tex' v- show='bool'>{
{
bool?'有我:‘没我' }}
<p>{
{
tex}}</p>
:/div>
</body>
</html>
<script src="node modules/vue/dist/vue .min.js"></script>
<script>
new Vue( {
data:{
bool:true,
tex:'么么哒'
}
el: ' #demoDiv'，
methods: {
fun(){
this . bool=! this. bool
this.tex='么么哒'
})
/script>
no.8v-命令用
ファシリテート データ データと表示ページ データ
構文:
v-for="(v,i) ファシリテートしたいデータ内"
v は便利な値
i は便利な添字
<!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>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-for</h1>
<ul>
<li v-for="(item,index) in arr">{
{
item}}------{
{
index}}</li>
</ul>
</div>
<script>
new Vue({
data:{
arr:["VN","EZ","NOC","MF"]
},
el:"#demoDiv"
})
</script>
</body>
</html>
複雑なデータを容易にする
<!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>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-for</h1>
<ul>
<li v-for="(item,index) in arr">{
{
item}}------{
{
index}}</li>
</ul>
<table border="1">
<tr v-for="(v,i) in obj">
<td>{
{
v.name}}</td>
<td>{
{
v.age}}</td>
</tr>
</table>
</div>
<script>
new Vue({
data:{
arr:["VN","EZ","NOC","MF"],
obj:[
{
name:"xixi1",age:181},
{
name:"xixi2",age:182},
{
name:"xixi3",age:183},
{
name:"xixi4",age:184},
{
name:"xixi5",age:185}
]
},
el:"#demoDiv"
})
</script>
</body>
</html>
no.9v-bindは初心者が一番忘れやすい
html タグの属性に変数をバインドする
<!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>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-bind</h1>
<a v-bind:href="ahref">{
{
atext}}</a>
<!-- 简写 -->
<a :href="ahref">{
{
atext}}</a>
</div>
<script>
new Vue({
data:{
atext:"点我去百度",
ahref:"http://www.baidu.com"
},
el:"#demoDiv"
})
</script>
</body>
</html>
no.10総合演習
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" >
meta http-equiv= "X-UA- Compatible" content=" IE=edge">
kmeta
name="viewport" content= "width=device-width, initial-scale=1.0">
<title> Document</title>
<style>
.red{
background-color: [ 1 red ;
</sty1e>
</head>
<div id=" demoDiv">
<h2>计算总价</h2>
<ul>
<li v-bind:class="v. style?'red':"" v-for="(v,i) in arr" @click=fun(i)>{
{
v.tit1e}--f{
v .num}}</li>
</ul >
kp>总价({
Number}}</p>
/div>
</body>
</html>
<script src=" ./node_ modules/vue/dist/vue .min. js"></script>
<script>
new Vue({
data:{
Number:0,
arr:[
{
title: '苹果”,num:5, style:false},
{
title: '石榴”,num:8, style:false};
{
title: '香蕉”,num:3, style:false},
{
title:”香梨' ,num:4, style:false},
{
title: '板栗”,num:10, style:false}
e1: ' #demoDiv'，
methods:
fun(i){
console. log(i);
this arr[i]. sty1e=!this arr[i]. style
if(this.arr[i].style){
this . Number+=this .arr[i] .num
}else{
this . Number--this . arr[i] . num
})
</scmipt>