Vue基础

Vue基础

有结果的叫表达式，没有结果的叫语句

模板语法

文本

{{}}，花括号里面可以放表达式

，如{{1+1}}

	<div>{{msg}}</div>
	<div>{{10>20 ? '想多了': "对了"}}</div>
	...
	<script>
        export default{
            data(){
                msg:"hello"
            }
        }
	</script>

原始HTML

	<div v-html="res"></div>
	...
	<script>
        export default{
            data(){
                res:"<h3>我是h3</h3>"
            }
        }
	</script>

v-bind

	<div v-bind:class="isActive">
	绑定
        //isActive可以改变div的class属性
	</div>
	...
	<script>
        export default{
            data(){
               isActive:"active"
            }
        }
	</script>	

v-show

	<div v-show="isShow">
	show
	</div>
	...
	<script>
        export default{
            data(){
               isShow:false//不显示，true显示
                //
            }
        }
	</script>	

v-if

	<div v-if="isFlag">
	111
	</div>
	<div v-else>
	</div>
	...
	<script>
        export default{
            data(){
               ifFlag:true
            }
        }
	</script>	

v-show和v-if是真正的条件渲染，若条件为假，则不会渲染，v-show的元素总会被渲染，只是简单的基于css进行切换

v-for

	<ul>
        <!--数组两个-->
        <li v-for="(item,index) in names" v-bind:key="index">{{item}}</li>
	</ul>
	<ul>
        <li v-for="(item,index) in user" v-bind:key="index">{{item.name}}{{item.age}}</li>
	</ul>
	<ul>
        <!--数组三个-->
        <li v-for="(item,name,index) in myObj" v-bind:key="index">{{name}}:{{item}}</li>
	</ul>
	...
	<script>
        export default{
            data(){
				names:['11','22','33'],
                user:[
                  {name:'11',age:11},
                  {name:'22',age:22}
                ],
                myObj:{
                    name:'111',
                    age:111,
                    sex:1
                }
                     
            }
        }
	</script>	

v-on

	<button v-on:click="count+1">
	按钮
	</button>
	<p>count</p>
	<button v-on:click="clickHandler">
	事件处理函数
	</button>
	...
	<script>
        export default{
            data(){
               count:0
            },
            methods:{
				clickHandler(event){
					console.log(event);
                    this.count+=10;
                }	
           	}
        }
	</script>	

事件修饰符

.stop

.prevent

.capture

.self

.once

安装vue脚手架vue-cli

cnpm install -g @vue/cli

可以使用vue的命令，vue create xxx来创建项目