-
public 是公共的
main.js入口文件
new Vue({ router, store, render: h => h(App), }).$mount('#app');实例化之后绑定#app
route 是安装的路由
store 是安装的vuex 管理组件直接的状态
el 绑定
查看全部 -
vue ui
create 项目
查看全部 -
npm run serve 开启项目
查看全部 -
代码规则 更优雅
选择 eslint + airbnb config
选择 eslint + standard config
保存的时候对代码进行检查，
保存到未来的项目，建议选择no,
选择yes 将来的项目 会安装之前的安装方式进行
查看全部 -
选择manually select features 为了学习不使用default 默认的安装方式。
用空格 选择需要安装的组件
查看全部 -
npm install npm@latest -g 更新npm包 最新 npm uninstall vue-cli -g 卸载 2.X 旧版本 npm install -g @vue/cli vue/cli 3 https://cli.vuejs.org/zh/guide/installation.html https://cn.vuejs.org/v2/guide/installation.html 小程序
查看全部 -
<div v-for="item in list"> <div v-if="item > 5" :> 大于5：{{item}} </div> <div v-else :class="['ac','add','more']"> {{item}} </div> </div> <div v-for="item in multi"> <div v-if="item.age == 18" v-bind:> {{item.name}}:{{item.age}} </div> <div v-else :class="{'activity':true}"> {{item.name}}:{{item.age}} </div> </div> </div> <script> var app = new Vue({ el: '#bg', data: { count:0, list:[1,2,3,4,5,6,8,7,9], multi:[{ name:'张艺兴', age:28 },{ name:'李健', age:18 },{ name:'邓伦', age:27 }], styleCss:{ color: 'red', textShadow : '0 0 5px #232323' } }, })查看全部 -
<div v-for="item in multi"> <div v-if="item.age == 18" v-bind:> {{item.name}}:{{item.age}} </div> <div v-else> {{item.name}}:{{item.age}} </div> </div> </div> <script> var app = new Vue({ el: '#bg', data: { count:0, list:[1,2,3,4,5,6,8,7,9], multi:[{ name:'张艺兴', age:28 },{ name:'李健', age:18 },{ name:'邓伦', age:27 }], styleCss:{ color: 'red', textShadow : '0 0 5px #232323' } }, })查看全部 -
<div id="bg"> <div class="bg" v-if="count < 0 "> hello : {{count}}个 </div> <div class="bg" v-else-if="count < 0 && count > -3"> hello2: {{count}} </div> <div class="bg" v-else> hello3: {{count}} </div> <div class="bg" v-show="count == -1"> hello4: {{count}} </div> </div> <script> var app = new Vue({ el: '#bg', data: { count:0 }, }) </script>查看全部 -
<div id="bg"> <div class="bg" v-if="count > 0"> hello : {{count}}个 </div> <div class="bg" v-else> 小于0: {{count}} </div> </div> <script> var app = new Vue({ el: '#bg', data: { count:0 }, }) </script>查看全部 -
条件渲染：根据时间 或者一些什么需求 进行渲染（v-if v-else ,v-else-if v-show）
列表渲染： for 循环
class 与style 绑定
查看全部 -
计算属性与侦听器
watch 通常监听一个变量 或一个常量 单一变量 或是数组
computed 可以监听多个变量 并且变量是在vue实例中
查看全部 -
watch 只监听当前 需要监听的值
computed 监听所有的值本实例中的值
var arr = 'outside arr' var app = new Vue({ el: '#bg', data: { msg: 'hello aurora', another: 'computed is another!' }, watch: { msg: function (newVal, oldVal) { console.log('newVal:' + newVal); console.log('oldVal:' + oldVal); } }, computed: { msg1: function () { return 'Computed:' + this.msg + '=.=' + this.another + '-----' + arr; } } })查看全部 -
<body> <div id="bg"> <div class="bg"> hello world {{msg}} </div> </div> <script> var app = new Vue({ el:'#bg', data:{ msg:'hello aurora', }, watch:{ msg:function(newVal, oldVal) { console.log('newVal:'+newVal); console.log('oldVal:'+oldVal); } }, computed:{ } })查看全部 -
{{count}} {{ (count+1)*10 }} <br/> {{template}} <div v-html="template"> </div> <a v-bind:href="url">百度</a> <a :href="url">百度</a> <button type="button" v-on:click="submit()">加数字</button> </div> <script> new Vue({ el:'#bg', data:{ msg:'hello aurora', count:0, template:'<div>hello template</div>', url:'http://www.baidu.com', bg1:"id-bind" }, methods:{ submit:function(){ this.count++ } }查看全部
举报
0/150
提交
取消