프런트엔드와 백엔드를 분리하는 프로젝트에 적합한 Vue(프로그레시브 프런트엔드 js 프레임워크).
기능: 시작하기 쉬움, 완전한 중국어 문서, 개발된 생태계(많은 플러그인)
vue 인스턴스를 작성하는 첫 번째 단계는 vue.js를 소개하는 것입니다.
<script src="js/vue.js"></script>
1. 선언적 렌더링
{ {}}를 통해 데이터를 DOM 구조로 렌더링
<div id="app">
<h1>Vue 开始</h1>
<p>{
{
msg}}</p>
<input type="text" v-model="msg">
</div>
<script>
new Vue({
el:"#app",
data:{
"msg":"你好世界，你好vue！"}
})
</script>
결과
2. 지침
명령이란 무엇입니까: 명령은 Vue 객체 인스턴스를 템플릿에 연결하는 특수 속성입니다(vue와 html 연결).
<div id="app">
<h1>Vue的指令</h1>
<h3>文本渲染指令 v-text</h3>
<p v-text="msg"></p>
<p v-text="8+5"></p>
<p v-text="msg+'不能！'"></p>
<p v-text="tip"></p>
<h3>文本渲染指令 v-html<br/>（可以解析html标签）</h3>
<p v-html="tip"></p>
<h3>文本渲染指令 {
{
} }</h3>
<p>{
{
msg}}</p>
<p>可以编写简单的javascript： {
{
2+3}}</p>
<p>msg的长度 {
{
msg.length}}</p>
<p>{
{
msg.split('').reverse().join('')}}</p>
<p>{
{
5>3?'大于':'小于'}}</p>
</div>
<script>
// 什么是指令：指令是连接Vue对象实例与模板的特殊属性（把vue和html连接在一起）
// 什么是vue实例 ：vm就是Vue的实例
// 什么是模板：#app
var vm = new Vue({
el:"#app",//vue指令在#app这个节点启用
data:{
msg:"你好我能做你的朋友吗？",
tip:"<strong>河南</strong>是一个好地方",
}
})
</script>
결과
3. 조건부 지침
v-if와 v-show의 차이점:
노드를 숨길 때
v-show는 css를 통해 v-if를 숨기고
dom을 제거하여 v-
show는 표시와 숨기기 사이를 자주 전환하는 데 적합합니다.
전환 표시 및 숨기기 양
<div id="app">
<h1>vue条件渲染指令</h1>
<h3>v-if指令</h3>
<p v-if="isLog">欢迎回来，我的主人！</p>
<p v-else>登录，注册</p>
<h3>v-else-if</h3>
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=80">良好</p>
<p v-else-if="score>=70">中等</p>
<p v-else-if="score>=60">及格</p>
<p v-else>不及格</p>
<h3>v-show</h3>
<p v-show="isLog">欢迎回来，我的主人！</p>
<!-- <p>v-if与v-show的区别：<br>
当去隐藏一个节点的时候，<br>
v-show通过css方式隐藏<br>
v-if是通过移除dom来实现</p>
<p>v-show适合频繁切换显示与隐藏 <br>
v-if 适合少量切换显示与隐藏
</p> -->
</div>
<script>
var vm = new Vue({
el:"#app",
data(){
return {
isLog:ture,
score:82
}
}
})
</script>
결과(isLog:true를 false로 변경하는 경우
돌아온 것을 환영합니다, 주인님!
보여주지 않다, 보여주다로그인 회원가입
）
4. 목록 렌더링 지침
<div id="app">
<h3>复杂列表对象</h3>
<p v-for="(item,index) in ls" :key="item.name">
{
{
index+1}}-{
{
item.name}}-{
{
item.age}}
</p>
<h3>对象</h3>
<p v-for="(value,k) in yang" :key="k">{
{
k}}-{
{
value}}</p>
<h3>渲染数字</h3>
<h3>列表渲染指令</h3>
<p v-for="item in list" :key="item+'a'">{
{
item}}</p>
<h3>列表渲染指令带索引</h3>
<p v-for="(item,index) in list" :key="item">{
{
index+1}}-{
{
item}}</p>
<h3>优化列表渲染</h3>
<p v-for="(item,index) in list" v-bind:key="index">{
{
index+1}}-{
{
item}}</p>
<p>key 帮助优化vue内部渲染，key值要求是唯一，还不建议用index，会取数据的id</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data(){
return{
ls:[
{
name:"cxx",age:22},
{
name:"wsj",age:18},
{
name:"小王",age:17},
],
list:['Vue','react','angular','jQuery'],
yang:{
"name":"阳阳",age:16,sex:"男"}
}
}
})
</script>
결과
5. 이벤트 처리
v-on: 이벤트 이름 = v-on:click="showMsg"
와 같은 "이벤트 핸들러 " v-on:click="showMsg()" 이벤트 핸들러
methods:{
showMsg();
}
응답 함수에 괄호가 있으면 기본적으로 이벤트 매개변수가 없습니다 .응답 함수에 괄호가 없으면 기본적으로 이벤트 매개변수가 있습니다.응답 함수에 괄호가 없으면 기본적으로 모든 이벤트 매개변수가 있습니다.e v e n tEvent 매개변수 응답 함수 에 괄호가 없으면 기본값 은 모든 이벤트 시간 매개 변수 입니다 .
괄호($event)가 있으면 이벤트 매개변수를 수동으로 지정하십시오. 이벤트 바인딩 약어
@click="showMsg"
<div id="app">
<h3>事件响应函数</h3>
<button @click="calc(-1)" :disabled="num<=1">-</button>
<!-- v-model.number 限定为数字 -->
<input type="text" v-model.number="num">
<button @click="calc(1)" :disabled="num>=999">+</button>
<h3>事件处理</h3>
<button v-on:click="num++">{
{
num}}</button>
<h3>事件处理简写</h3>
<button @click="num--">{
{
num}}</button>
</div>
<script>
var vm = new Vue({
el: "#app",
methods: {
calc(step) {
// 在js中访问data中num值需要加this
this.num += step;
// 对num进行限定
if (this.num < 1) {
this.num = 1 }
if (this.num > 999) {
this.num = 999 }
}
},
data() {
return {
num: 1
}
}
})
</script>
결과("+", "-"를 클릭하면 그에 따라 모든 숫자가 변경됨)
6. 속성 렌더링
v-bind: 속성 이름="속성 값"
v-bind:title="msg"
v-모델 형식 속성
: title="msg" //약어
<div id="app">
<h3>属性渲染指令</h3>
<p>{
{
msg}}</p>
<input type="text" v-model="msg">
<p v-bind:title="msg">我是一行可爱的文字</p>
<h3>属性绑定简写</h3>
<p :title="msg">我是一行可爱的文字</p>
<h3>表单属性绑定</h3>
<p>
<!-- checkbox 选中的true，不选中是false -->
隐私条款 <input type="checkbox" v-model="flag" />
</p>
<!-- disabled 取值为true时候，表单不可以用 -->
<button :disabled="!flag">注册</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data (){
return {
msg:"中国伟大的祖国",
flag:false,
}
},
})
</script>
결과(마우스를 "
나는 사랑스러운 텍스트 라인입니다
"실행 결과에 제목 프롬프트가 표시됩니다.)
7. 탭 케이스
<div id="app">
<button @click="num=1" :class="num==1?'active':''">html</button>
<button @click="num=2" :class="num==2?'active':''">css</button>
<button @click="num=3" :class="num==3?'active':''">vue</button>
<div v-if="num==1">html内容</div>
<div v-if="num==2">css内容</div>
<div v-if="num==3">vue内容</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data(){
return {
num:1
}
}
})
</script>
결과(내용을 전환하려면 버튼을 클릭)
8. 이벤트 수정자
<div id="app">
<h3>事件修饰符</h3>
<button @click.once="say()">按钮</button>
</div>
<script>
var vm=new Vue({
el:"#app",
methods:{
say(){
alert("大声说出来")
}
},
data(){
return{
num:1
}
}
})
</script>
결과
