lession1
1.Vue understanding
Progressive framework of: Mrs Rain Creek mvvm
2. Create an instance of vue
引入<script src="vue.js"><script>
<body>
<div id="myApp">
</div>
</body>
<script>
new view ({
el: "# myApp", // mount
data: {// your data states.
str:""
}
})
</script>
3. The base command directive
vue extension of element attributes to begin with v-
v-model can bind your form elements with your data
Modifier: the instruction property
number: The value of the element bound is set to number
trim: remove whitespace
lazy: When losing focus, will respond to your data
v-if value is a Boolean, whether rendering
v-else-if v-else v-if
v-for traversing data (strings, numbers, objects, arrays)
v-bind your data with your shorthand binding element attributes:
v-show used to hide or display
v-on binding events shorthand
v-once an initial value for
v-pre skipped region
{} {}: Outputting data, writing expression.
Attached:
JS a negate operation:
const str = "People's Republic of China";
console.log(str.split("").reverse().join(""))
Event examples:
<script src="vue.js"><script>
<body>
<div id="myApp">
<-! Parentheses to the latter method will not increase, you can add ->
<Input type = "button" v-on: click = "changeIsShow" value = "displaying and hiding">
<Input type = "button" @ click = "changeIsShow" value = "@ show and hide">
<div v-show="isShow">
I picked up a penny in the street, give it to the police uncle hand inside.
</div>
</div>
</body>
<script>
new view ({
el:"#myApp",
// store your state.
data:{
isShow:true
},
// function your way to write here
methods:{
// method
changeIsShow(){
this.isShow = !this.isShow;
// console.log(this.isShow);
}
}
})
</script>
Key interview questions:
The difference 1.mvvm and mvc
mvc and mvvm fact, differences are not significant. It is a kind of design. Mainly in mvc Controller evolved into mvvm in viewModel. mvvm mainly to solve a large number of DOM manipulation mvc the page rendering performance degradation, slow load times, affecting the user experience. And when changes occur frequently Model, developers need to take the initiative to update the View.
2.vue why custom component data is defined as a function?
Mainly to prevent between components and assemblies, variable declarations influence each other, they are independent of each other, complementary interference
All components will be instances when shared data component reuse, if the data is an object, it would result in a component later modified data will affect all other components, so the data need to be written as a function, each function is called once used to acquire new data.